#app-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  height: 100vh;
  background-color: #f0f0f0;
  font-family: Poppins, sans-serif;
}
#app-loading .cube,
#app-loading .cube * {
  position: absolute;
  width: 6rem;
  height: 6rem;
}
#app-loading .cube .sides * {
  box-sizing: border-box;
  border: 0.12rem solid white;
  border-radius: 0.25rem;
  background: rgb(255 255 255 / 10%);
}
@keyframes app-loading-rotate {
  0% {
    transform: rotateX(-37.5deg) rotateY(45deg);
  }
  50% {
    transform: rotateX(-37.5deg) rotateY(405deg);
  }
  100% {
    transform: rotateX(-37.5deg) rotateY(405deg);
  }
}
#app-loading .sides {
  animation: app-loading-rotate 3s ease infinite;
  animation-delay: 0.8s;
  transform-style: preserve-3d;
  transform: rotateX(-37.5deg) rotateY(45deg);
  background-color: transparent;
}
#app-loading .cube .sides .top {
  animation: app-loading-top 3s ease infinite;
  transform: rotateX(90deg) translateZ(96px);
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
  border-color: hsl(207.1deg 100% 33.9%);
}
@keyframes app-loading-top {
  0%,
  100% {
    opacity: 1;
    transform: rotateX(90deg) translateZ(100px);
  }
  20%,
  70% {
    opacity: 1;
    transform: rotateX(90deg) translateZ(48px);
  }
}
#app-loading .cube .sides .bottom {
  animation: app-loading-bottom 3s ease infinite;
  transform: rotateX(-90deg) translateZ(96px);
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
  border-color: hsl(207.1deg 100% 33.9%);
}
@keyframes app-loading-bottom {
  0%,
  100% {
    opacity: 1;
    transform: rotateX(-90deg) translateZ(100px);
  }
  20%,
  70% {
    opacity: 1;
    transform: rotateX(-90deg) translateZ(48px);
  }
}
#app-loading .cube .sides .front {
  animation: app-loading-front 3s ease infinite;
  animation-delay: 100ms;
  transform: rotateY(0deg) translateZ(96px);
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
  border-color: hsl(207.1deg 100% 33.9%);
}
@keyframes app-loading-front {
  0%,
  100% {
    opacity: 1;
    transform: rotateY(0deg) translateZ(96px);
  }
  20%,
  70% {
    opacity: 1;
    transform: rotateY(0deg) translateZ(48px);
  }
}
#app-loading .cube .sides .back {
  animation: app-loading-back 3s ease infinite;
  animation-delay: 100ms;
  transform: rotateY(-180deg) translateZ(96px);
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
  border-color: hsl(207.1deg 100% 33.9%);
}
@keyframes app-loading-back {
  0%,
  100% {
    opacity: 1;
    transform: rotateY(-180deg) translateZ(96px);
  }
  20%,
  70% {
    opacity: 1;
    transform: rotateY(-180deg) translateZ(48px);
  }
}
#app-loading .cube .sides .left {
  animation: app-loading-left 3s ease infinite;
  animation-delay: 100ms;
  transform: rotateY(-90deg) translateZ(96px);
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
  border-color: hsl(207.1deg 100% 33.9%);
}
@keyframes app-loading-left {
  0%,
  100% {
    opacity: 1;
    transform: rotateY(-90deg) translateZ(96px);
  }
  20%,
  70% {
    opacity: 1;
    transform: rotateY(-90deg) translateZ(48px);
  }
}
#app-loading .cube .sides .right {
  animation: app-loading-right 3s ease infinite;
  animation-delay: 100ms;
  transform: rotateY(90deg) translateZ(96px);
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
  border-color: hsl(207.1deg 100% 33.9%);
}
@keyframes app-loading-right {
  0%,
  100% {
    opacity: 1;
    transform: rotateY(90deg) translateZ(96px);
  }
  20%,
  70% {
    opacity: 1;
    transform: rotateY(90deg) translateZ(48px);
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  #app-loading .sides,
  #app-loading .cube .sides * {
    animation: none;
  }
}