body{
  margin: 0;
  background-color: #FBF5F6;
}


#circuit-loader-wrapper{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

#circuit-loader-circle{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#circuit-loader-circle > span{
  border-radius: 100%;
  display: block;
  width: 150vw;
  height: 150vw;
  position: absolute;
  transform: scale(1);
  transition: transform 0.5s ease-in-out;
}

#circuit-loader-circle > span:first-of-type{
  background: #FBF5F6;
  opacity: 0.6;
  transition-delay: 0.15s;
}
#circuit-loader-circle > span:nth-of-type(2){ background: linear-gradient(45deg, black 20%, #550101);}
#circuit-loader-circle > span:last-of-type{
  border: solid 4px black;
  transition-delay: 0.1s;
}

#circuit-loader-element{
  position: absolute;
  z-index: 2;
  width: 10%;
  transform: scale(1);
  animation-name: shrink;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-direction: alternate;
}

@keyframes shrink {
  to{ transform: scale(0.8); }
}

@keyframes rotate {
  to{ transform: rotate(360deg); }
}
#circuit-loader-element svg{
  transition: transform 0.3s ease-in-out;
}

#circuit-loader-element svg #print{
  transform-origin: 50% 45%;
  animation-name: rotate;
  animation-timing-function: cubic-bezier(.68,.02,.32,.98);
  animation-iteration-count: infinite;
  animation-duration: 2.5s;
}



/*-----unload animations-----*/

#circuit-loader-wrapper.unload #circuit-loader-circle > span{ transform: scale(0); }
#circuit-loader-wrapper.unload #circuit-loader-element > svg{ transform: scale(0); }