*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  background-color: #000;
}
body .scene-wrapper {
  min-height: 90vh;
  display: grid;
  place-items: center;
  perspective: 800px;
  overflow: hidden;
}
body * {
  transform-style: preserve-3d;
}
body h1 {
  color: darkviolet;
  text-align: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 4em;
}

.scene {
  position: relative;
  transform: rotateX(-30deg) rotateY(-60deg);
  font-size: 60px;
  animation: sceneRotate 60s infinite linear;
}
@keyframes sceneRotate {
  from {
    transform: rotateX(-30deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-30deg) rotateY(360deg);
  }
}

.column {
  position: absolute;
  transform: rotateY(var(--ry)) translateX(2.8em);
}
.column:nth-child(1) {
  --ry: 0deg;
}
.column:nth-child(1) .box {
  animation: boxRotate0 12s var(--delay) infinite ease-in-out, boxTop0 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@keyframes boxRotate0 {
  0%, 33.2% {
    rotate: 0.25turn;
  }
  40.72%, 44.54%, 47.42%, 51.16%, 53.32% {
    rotate: -0.25turn;
    animation-timing-function: step-end;
  }
  40.72%, 44.54%, 47.42%, 51.16%, 53.32% {
    rotate: 0turn;
  }
  60%, 100% {
    rotate: -0.5turn;
  }
}
@keyframes boxTop0 {
  0%, 33.2% {
    top: 0;
  }
  40.72% {
    top: -1em;
  }
  44.54% {
    top: -2em;
  }
  47.42% {
    top: -3em;
  }
  51.16% {
    top: -4em;
  }
  53.32% {
    top: -5em;
  }
}
.column:nth-child(2) {
  --ry: 30deg;
}
.column:nth-child(2) .box {
  animation: boxRotate1 12s var(--delay) infinite ease-in-out, boxTop1 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@keyframes boxRotate1 {
  0%, 34% {
    rotate: 0.25turn;
  }
  41.96%, 45.54%, 48.7%, 52%, 55.42% {
    rotate: -0.25turn;
    animation-timing-function: step-end;
  }
  41.96%, 45.54%, 48.7%, 52%, 55.42% {
    rotate: 0turn;
  }
  63.06%, 100% {
    rotate: -0.5turn;
  }
}
@keyframes boxTop1 {
  0%, 34% {
    top: 0;
  }
  41.96% {
    top: -1em;
  }
  45.54% {
    top: -2em;
  }
  48.7% {
    top: -3em;
  }
  52% {
    top: -4em;
  }
  55.42% {
    top: -5em;
  }
}
.column:nth-child(3) {
  --ry: 60deg;
}
.column:nth-child(3) .box {
  animation: boxRotate2 12s var(--delay) infinite ease-in-out, boxTop2 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@keyframes boxRotate2 {
  0%, 10.4% {
    rotate: 0.25turn;
  }
  17.16%, 20.96%, 23.56%, 25.88%, 29.2% {
    rotate: -0.25turn;
    animation-timing-function: step-end;
  }
  17.16%, 20.96%, 23.56%, 25.88%, 29.2% {
    rotate: 0turn;
  }
  35.68%, 100% {
    rotate: -0.5turn;
  }
}
@keyframes boxTop2 {
  0%, 10.4% {
    top: 0;
  }
  17.16% {
    top: -1em;
  }
  20.96% {
    top: -2em;
  }
  23.56% {
    top: -3em;
  }
  25.88% {
    top: -4em;
  }
  29.2% {
    top: -5em;
  }
}
.column:nth-child(4) {
  --ry: 90deg;
}
.column:nth-child(4) .box {
  animation: boxRotate3 12s var(--delay) infinite ease-in-out, boxTop3 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@keyframes boxRotate3 {
  0%, 16.4% {
    rotate: 0.25turn;
  }
  22.52%, 24.98%, 27.06%, 29.54%, 31.78% {
    rotate: -0.25turn;
    animation-timing-function: step-end;
  }
  22.52%, 24.98%, 27.06%, 29.54%, 31.78% {
    rotate: 0turn;
  }
  37.7%, 100% {
    rotate: -0.5turn;
  }
}
@keyframes boxTop3 {
  0%, 16.4% {
    top: 0;
  }
  22.52% {
    top: -1em;
  }
  24.98% {
    top: -2em;
  }
  27.06% {
    top: -3em;
  }
  29.54% {
    top: -4em;
  }
  31.78% {
    top: -5em;
  }
}
.column:nth-child(5) {
  --ry: 120deg;
}
.column:nth-child(5) .box {
  animation: boxRotate4 12s var(--delay) infinite ease-in-out, boxTop4 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@keyframes boxRotate4 {
  0%, 29.6% {
    rotate: 0.25turn;
  }
  33.84%, 36.46%, 38.8%, 42.04%, 44.28% {
    rotate: -0.25turn;
    animation-timing-function: step-end;
  }
  33.84%, 36.46%, 38.8%, 42.04%, 44.28% {
    rotate: 0turn;
  }
  49.48%, 100% {
    rotate: -0.5turn;
  }
}
@keyframes boxTop4 {
  0%, 29.6% {
    top: 0;
  }
  33.84% {
    top: -1em;
  }
  36.46% {
    top: -2em;
  }
  38.8% {
    top: -3em;
  }
  42.04% {
    top: -4em;
  }
  44.28% {
    top: -5em;
  }
}
.column:nth-child(6) {
  --ry: 150deg;
}
.column:nth-child(6) .box {
  animation: boxRotate5 12s var(--delay) infinite ease-in-out, boxTop5 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@keyframes boxRotate5 {
  0%, 10.8% {
    rotate: 0.25turn;
  }
  17.72%, 19.76%, 23.2%, 25.9%, 28.06% {
    rotate: -0.25turn;
    animation-timing-function: step-end;
  }
  17.72%, 19.76%, 23.2%, 25.9%, 28.06% {
    rotate: 0turn;
  }
  35.74%, 100% {
    rotate: -0.5turn;
  }
}
@keyframes boxTop5 {
  0%, 10.8% {
    top: 0;
  }
  17.72% {
    top: -1em;
  }
  19.76% {
    top: -2em;
  }
  23.2% {
    top: -3em;
  }
  25.9% {
    top: -4em;
  }
  28.06% {
    top: -5em;
  }
}
.column:nth-child(7) {
  --ry: 180deg;
}
.column:nth-child(7) .box {
  animation: boxRotate6 12s var(--delay) infinite ease-in-out, boxTop6 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@keyframes boxRotate6 {
  0%, 22% {
    rotate: 0.25turn;
  }
  27.04%, 30.22%, 33.2%, 35.32%, 38.96% {
    rotate: -0.25turn;
    animation-timing-function: step-end;
  }
  27.04%, 30.22%, 33.2%, 35.32%, 38.96% {
    rotate: 0turn;
  }
  44.24%, 100% {
    rotate: -0.5turn;
  }
}
@keyframes boxTop6 {
  0%, 22% {
    top: 0;
  }
  27.04% {
    top: -1em;
  }
  30.22% {
    top: -2em;
  }
  33.2% {
    top: -3em;
  }
  35.32% {
    top: -4em;
  }
  38.96% {
    top: -5em;
  }
}
.column:nth-child(8) {
  --ry: 210deg;
}
.column:nth-child(8) .box {
  animation: boxRotate7 12s var(--delay) infinite ease-in-out, boxTop7 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@keyframes boxRotate7 {
  0%, 38% {
    rotate: 0.25turn;
  }
  43.96%, 47.28%, 50.58%, 53.36%, 56.7% {
    rotate: -0.25turn;
    animation-timing-function: step-end;
  }
  43.96%, 47.28%, 50.58%, 53.36%, 56.7% {
    rotate: 0turn;
  }
  61.38%, 100% {
    rotate: -0.5turn;
  }
}
@keyframes boxTop7 {
  0%, 38% {
    top: 0;
  }
  43.96% {
    top: -1em;
  }
  47.28% {
    top: -2em;
  }
  50.58% {
    top: -3em;
  }
  53.36% {
    top: -4em;
  }
  56.7% {
    top: -5em;
  }
}
.column:nth-child(9) {
  --ry: 240deg;
}
.column:nth-child(9) .box {
  animation: boxRotate8 12s var(--delay) infinite ease-in-out, boxTop8 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@keyframes boxRotate8 {
  0%, 4% {
    rotate: 0.25turn;
  }
  8.68%, 12.64%, 16.18%, 18.46%, 22.46% {
    rotate: -0.25turn;
    animation-timing-function: step-end;
  }
  8.68%, 12.64%, 16.18%, 18.46%, 22.46% {
    rotate: 0turn;
  }
  29.3%, 100% {
    rotate: -0.5turn;
  }
}
@keyframes boxTop8 {
  0%, 4% {
    top: 0;
  }
  8.68% {
    top: -1em;
  }
  12.64% {
    top: -2em;
  }
  16.18% {
    top: -3em;
  }
  18.46% {
    top: -4em;
  }
  22.46% {
    top: -5em;
  }
}
.column:nth-child(10) {
  --ry: 270deg;
}
.column:nth-child(10) .box {
  animation: boxRotate9 12s var(--delay) infinite ease-in-out, boxTop9 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@keyframes boxRotate9 {
  0%, 7.2% {
    rotate: 0.25turn;
  }
  13.68%, 17.68%, 19.92%, 23.38%, 26.16% {
    rotate: -0.25turn;
    animation-timing-function: step-end;
  }
  13.68%, 17.68%, 19.92%, 23.38%, 26.16% {
    rotate: 0turn;
  }
  31.52%, 100% {
    rotate: -0.5turn;
  }
}
@keyframes boxTop9 {
  0%, 7.2% {
    top: 0;
  }
  13.68% {
    top: -1em;
  }
  17.68% {
    top: -2em;
  }
  19.92% {
    top: -3em;
  }
  23.38% {
    top: -4em;
  }
  26.16% {
    top: -5em;
  }
}
.column:nth-child(11) {
  --ry: 300deg;
}
.column:nth-child(11) .box {
  animation: boxRotate10 12s var(--delay) infinite ease-in-out, boxTop10 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@keyframes boxRotate10 {
  0%, 15.6% {
    rotate: 0.25turn;
  }
  22.28%, 24.3%, 26.76%, 30.02%, 33.4% {
    rotate: -0.25turn;
    animation-timing-function: step-end;
  }
  22.28%, 24.3%, 26.76%, 30.02%, 33.4% {
    rotate: 0turn;
  }
  38.64%, 100% {
    rotate: -0.5turn;
  }
}
@keyframes boxTop10 {
  0%, 15.6% {
    top: 0;
  }
  22.28% {
    top: -1em;
  }
  24.3% {
    top: -2em;
  }
  26.76% {
    top: -3em;
  }
  30.02% {
    top: -4em;
  }
  33.4% {
    top: -5em;
  }
}
.column:nth-child(12) {
  --ry: 330deg;
}
.column:nth-child(12) .box {
  animation: boxRotate11 12s var(--delay) infinite ease-in-out, boxTop11 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}
@keyframes boxRotate11 {
  0%, 24.4% {
    rotate: 0.25turn;
  }
  30.52%, 32.72%, 36.62%, 39.72%, 42.4% {
    rotate: -0.25turn;
    animation-timing-function: step-end;
  }
  30.52%, 32.72%, 36.62%, 39.72%, 42.4% {
    rotate: 0turn;
  }
  46.84%, 100% {
    rotate: -0.5turn;
  }
}
@keyframes boxTop11 {
  0%, 24.4% {
    top: 0;
  }
  30.52% {
    top: -1em;
  }
  32.72% {
    top: -2em;
  }
  36.62% {
    top: -3em;
  }
  39.72% {
    top: -4em;
  }
  42.4% {
    top: -5em;
  }
}

.box {
  position: absolute;
  width: 1em;
  height: 1em;
  transform-origin: top left;
}
.box:nth-child(1) {
  --delay: 0s;
}
.box:nth-child(2) {
  --delay: -2s;
}
.box:nth-child(3) {
  --delay: -4s;
}
.box:nth-child(4) {
  --delay: -6s;
}
.box:nth-child(5) {
  --delay: -8s;
}
.box:nth-child(6) {
  --delay: -10s;
}
@keyframes boxTranslate {
  from {
    translate: 0 1em;
  }
  to {
    translate: 0 7em;
  }
}
.box i {
  --gap: 0.05em;
  position: absolute;
  inset: var(--gap);
  background-color: rgba(0, 0, 0, 0.8666666667);
  border: 2px darkviolet solid;
  box-shadow: 0 0 0.5em darkviolet inset;
}
.box i:nth-child(1) {
  transform: translateZ(calc(0.5em - var(--gap)));
}
.box i:nth-child(2) {
  transform: rotateY(90deg) translateZ(calc(0.5em - var(--gap)));
}
.box i:nth-child(3) {
  transform: rotateY(180deg) translateZ(calc(0.5em - var(--gap)));
}
.box i:nth-child(4) {
  transform: rotateY(270deg) translateZ(calc(0.5em - var(--gap)));
}
.box i:nth-child(5) {
  transform: rotateX(270deg) translateZ(calc(0.5em - var(--gap)));
}
.box i:nth-child(6) {
  transform: rotateX(90deg) translateZ(calc(0.5em - var(--gap)));
}

h1 {
  position: absolute;
  top: 2rem;
  width: 100%;
  text-align: center;
  color: #fff;
  z-index: 1;
}

@media (max-width: 768px) {
  body h1 {
    font-size: 3.5em;
    padding: 0 0.5em;
  }
}
/*
@media (max-width: 768px) {
  body {
    perspective: 500px;
  }

  .scene {
    //font-size: clamp(30px, 8vw, 60px);
  }

  .column {
    transform: rotateY(var(--ry)) translateX(1.8em);
  }

  h1 {
    font-size: clamp(1rem, 5vw, 2rem);
    top: 1rem;
  }
}
  */

/*# sourceMappingURL=style.css.map */