.preloader {
  background: radial-gradient(81.05% 109.28% at 101.9% 112.78%, rgba(20, 142, 255, 0.6) 0%, rgba(1, 86, 207, 0.6) 22.6%, rgba(27, 27, 27, 0) 100%), radial-gradient(88.32% 66.3% at 53.59% -41.38%, rgba(20, 142, 255, 0.6) 0%, rgba(1, 86, 207, 0.6) 37.08%, rgba(27, 27, 27, 0) 100%), #02030C;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  z-index: -10000;
  transition: all 0.3s;
}
.preloader.active {
  opacity: 1;
  visibility: visible;
  z-index: 10000;
}

.pl1 {
  display: block;
  width: 8em;
  height: 8em;
}

.pl1__g,
.pl1__rect {
  animation: pl1-a 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.pl1__g {
  transform-origin: 64px 64px;
}

.pl1__rect:first-child {
  animation-name: pl1-b;
}

.pl1__rect:nth-child(2) {
  animation-name: pl1-c;
}

/* Animations */
@keyframes pl1-a {
  from {
    transform: rotate(0);
  }
  80%, to {
    animation-timing-function: steps(1, start);
    transform: rotate(90deg);
  }
}
@keyframes pl1-b {
  from {
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
    width: 40px;
    height: 40px;
  }
  20% {
    animation-timing-function: steps(1, start);
    width: 40px;
    height: 0;
  }
  60% {
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    width: 0;
    height: 40px;
  }
  80%, to {
    width: 40px;
    height: 40px;
  }
}
@keyframes pl1-c {
  from {
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
    width: 40px;
    height: 40px;
    transform: translate(0, 48px);
  }
  20% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
    width: 40px;
    height: 88px;
    transform: translate(0, 0);
  }
  40% {
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
    width: 40px;
    height: 40px;
    transform: translate(0, 0);
  }
  60% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
    width: 88px;
    height: 40px;
    transform: translate(0, 0);
  }
  80%, to {
    width: 40px;
    height: 40px;
    transform: translate(48px, 0);
  }
}/*# sourceMappingURL=preloader.css.map */