#loader .icon {
	--color: white;
	--size-mid: 12vmin;
	--size-dot: 3vmin;
	--size-bar: 0.8vmin;
	--size-square: 6vmin;	
	display: block;
	position: absolute;
	left: 50%;
  top: 50%;
	display: grid;
	place-items: center;
}

#loader .icon::before,
#loader .icon::after {
	content: '';
	box-sizing: border-box;
	position: absolute;
}

/**
	loader --1
**/
#loader .icon::before {
	width: var(--size-mid);
	height: var(--size-mid);
	border: 4px solid var(--color);
	border-top-color: transparent;
	border-radius: 50%;
	animation: loader-1 1s linear infinite;
}

#loader .icon::after {
	width: calc(var(--size-mid) - 2px);
	height: calc(var(--size-mid) - 2px);
	border: 2px solid transparent;
	border-top-color: var(--color);
	border-radius: 50%;
	animation: loader-1 0.6s linear reverse infinite;
}

@keyframes loader-1 {
	100% {
		transform: rotate(1turn);
	}
}

#loader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(255,255,255);
  background-image: radial-gradient(circle, var(--darkpurple), #121212, var(--darkpurple));

}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#root,
#header,
#footer {
  display: none;
}