html {
  --loader-color: #96bc33;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
}

@keyframes preload-show-1 {
  from {
    transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
}
@keyframes preload-hide-1 {
  to {
    transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
}
@keyframes preload-cycle-1 {
  5% {
    transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
  10%,
  75% {
    transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
  80%,
  100% {
    transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
}
@keyframes preload-show-2 {
  from {
    transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
}
@keyframes preload-hide-2 {
  to {
    transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
}
@keyframes preload-cycle-2 {
  10% {
    transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
  15%,
  70% {
    transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
  75%,
  100% {
    transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
}
@keyframes preload-show-3 {
  from {
    transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
}
@keyframes preload-hide-3 {
  to {
    transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
}
@keyframes preload-cycle-3 {
  15% {
    transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
  20%,
  65% {
    transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
  70%,
  100% {
    transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
}
@keyframes preload-show-4 {
  from {
    transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
}
@keyframes preload-hide-4 {
  to {
    transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
}
@keyframes preload-cycle-4 {
  20% {
    transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
  25%,
  60% {
    transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
  65%,
  100% {
    transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
}
@keyframes preload-show-5 {
  from {
    transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
}
@keyframes preload-hide-5 {
  to {
    transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
}
@keyframes preload-cycle-5 {
  25% {
    transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
  30%,
  55% {
    transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
  60%,
  100% {
    transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
}
@keyframes preload-show-6 {
  from {
    transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
}
@keyframes preload-hide-6 {
  to {
    transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
}
@keyframes preload-cycle-6 {
  30% {
    transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
  35%,
  50% {
    transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
  55%,
  100% {
    transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
    border-left-color: var(--loader-color);
  }
}

.MainLoader {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2b373e;
  border: none;
  outline: none;
  right: 0;
  bottom: 0;
}

.MainLoader-content {
  position: relative;
  text-align: center;
}

.main-preloader {
  position: absolute;
  top: 25px;
  left: 50%;
  font-size: 20px;
  display: block;
  width: 7.5em;
  height: 8.5em;
  margin-left: -3.75em;
  margin-top: -4.25em;
  transform-origin: center center;
  transform: rotateY(180deg) rotateZ(-60deg);
}
.main-preloader .main-slice {
  border-top: 2.25em solid transparent;
  border-right: none;
  border-bottom: 2em solid transparent;
  border-left: 3.75em solid var(--loader-color);
  position: absolute;
  top: 0;
  left: 50%;
  transform-origin: left bottom;
  border-radius: 3px 3px 0 0;
}
.main-preloader .main-slice:nth-child(1) {
  transform: rotateZ(60deg) rotateY(0deg) rotateX(0);
  animation: 0.15s linear 0.82s preload-hide-1 both 1;
}
.main-preloader .main-slice:nth-child(2) {
  transform: rotateZ(120deg) rotateY(0deg) rotateX(0);
  animation: 0.15s linear 0.74s preload-hide-2 both 1;
}
.main-preloader .main-slice:nth-child(3) {
  transform: rotateZ(180deg) rotateY(0deg) rotateX(0);
  animation: 0.15s linear 0.66s preload-hide-3 both 1;
}
.main-preloader .main-slice:nth-child(4) {
  transform: rotateZ(240deg) rotateY(0deg) rotateX(0);
  animation: 0.15s linear 0.58s preload-hide-4 both 1;
}
.main-preloader .main-slice:nth-child(5) {
  transform: rotateZ(300deg) rotateY(0deg) rotateX(0);
  animation: 0.15s linear 0.5s preload-hide-5 both 1;
}
.main-preloader .main-slice:nth-child(6) {
  transform: rotateZ(360deg) rotateY(0deg) rotateX(0);
  animation: 0.15s linear 0.42s preload-hide-6 both 1;
}
.main-preloader.loading {
  animation: 2s preload-flip steps(2) infinite both;
}
.main-preloader.loading .main-slice:nth-child(1) {
  transform: rotateZ(60deg) rotateY(90deg) rotateX(0);
  animation: 2s preload-cycle-1 linear infinite both;
}
.main-preloader.loading .main-slice:nth-child(2) {
  transform: rotateZ(120deg) rotateY(90deg) rotateX(0);
  animation: 2s preload-cycle-2 linear infinite both;
}
.main-preloader.loading .main-slice:nth-child(3) {
  transform: rotateZ(180deg) rotateY(90deg) rotateX(0);
  animation: 2s preload-cycle-3 linear infinite both;
}
.main-preloader.loading .main-slice:nth-child(4) {
  transform: rotateZ(240deg) rotateY(90deg) rotateX(0);
  animation: 2s preload-cycle-4 linear infinite both;
}
.main-preloader.loading .main-slice:nth-child(5) {
  transform: rotateZ(300deg) rotateY(90deg) rotateX(0);
  animation: 2s preload-cycle-5 linear infinite both;
}
.main-preloader.loading .main-slice:nth-child(6) {
  transform: rotateZ(360deg) rotateY(90deg) rotateX(0);
  animation: 2s preload-cycle-6 linear infinite both;
}