body {
overflow: hidden;
}
/**
Mess around with these variables to change the display of the boxes.
*/
@keyframes move-about {
  0% {
    left: 30.4354%;
    top: 50.32443%;
    transform: rotateX(0deg) rotateY(0deg) rotateY(0deg);
  }
  25% {
    left: 70.23432%;
    top: 50.324234%;
    transform: rotateX(0deg) rotateY(0deg) rotateY(0deg);
  }
  66% {
    left: 70.0324536%;
    top: 70.2345%;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  75% {
    left: 70%;
    top: 79.324%;
    transform: rotateX(0deg) rotateY(0deg) rotateY(0deg);
  }
  100% {
    left: 23.2323%;
    top: 79.3333%;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
}
main {
width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 0;
    animation-timing-function: linear;
    perspective: 11000px;
    perspective-origin: 100px -500px;
    transform: translateY(-50%);
    transform-style: preserve-3d;
}

@keyframes blurry {
  10% {
    filter: blur(0px) hue-rotate(90deg);
  }
  20% {
    filter: blur(22px) hue-rotate(0deg);
  }
  50% {
    filter: blur(0px) hue-rotate(90deg);
  }
  80% {
    filter: blur(22px) hue-rotate(0deg);
  }
  81% {
    filter: blur(1px) hue-rotate(0deg);
  }
  100% {
    filter: blur(0px) hue-rotate(180deg);
  }
}
body {
  background-color: #0E0E0E;
  background-repeat: no-repeat;
  background-size: cover;
  transform: rotate(0deg);
}
body article {
  position: absolute;
  left: 50%;
  right: 50%;
  top: 90%;
  perspective: 2000px;
  transition-origin: 200px 620px;
  transform-style: preserve-3d;
  font-size: 15px;
  z-index: 1;
  animation-timing-function: linear;
  transform: rotateX(0deg) rotateY(1deg) rotateZ(1deg);
  animation-duration: 150s;
  animation-fill-mode: both;
  animation-direction: alternate;
  animation-delay: 0s;
  color: transparent;
}
body article:nth-child(2) {
  transform: rotateX(-90deg) rotateY(90deg) rotateZ(1deg);
}
body article:nth-child(3) {
  transform: rotateX(1deg) rotateY(-90deg) rotateZ(-90deg);
}
body article:nth-child(4) {
  transform: rotateX(1deg) rotateY(1deg) rotateZ(90deg);
}

@keyframes base {
  0% {
    transform: translateX(-20px) translateY(-20px) translateZ(-30px) rotateY(-45deg) rotateX(45deg) rotateZ(45deg);
  }
  100% {
    transform: translateX(20px) translateY(20px) translateZ(30px) rotateY(1200deg) rotateX(1200deg) rotateZ(1100deg);
  }
}
div {
  position: absolute;
  animation-name: base;
  animation-duration: 130s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-direction: alternate;
  animation-timing-function: linear;
  left: 50%;
  top: 50%;
  transform-origin: 20px -30px;
  transform-style: preserve-3d;
  backface-visibility: visible;
  padding: 50px;
  perspective: 3500px;
}
div > div {
  animation-duration: 30s;
}

span {
  color: transparent;
  border: 1px solid;
  border-radius: 2%;
  position: absolute;
  font-size: 50%;
  width: 2.2rem;
  height: 2.2rem;
  transform-style: preserve-3d;
  text-align: center;
  background-color: rgba(86, 25, 120, 1);
  background-size: cover;
  transform: translateX(0%) translateY(0%) translateZ(0rem) rotateY(180deg);
}
span:nth-child(2) {
  background-color: rgba(255, 25, 255, 1);
  opacity: 1;
  transform: translateX(50%) translateY(0%) translateZ(1.1rem) rotateY(90deg);
  background-position: 2.2rem 0;
}
span:nth-child(3) {
  background-color: rgba(25, 255, 255, 1);
  background-position: 4.4rem 0;
  transform: translateX(0%) translateY(0%) translateZ(2.2rem) rotateY(0deg);
}
span:nth-child(4) {
  background-color: rgba(255, 255, 25, 1);
  background-position: 6.6rem 0;
  transform: translateX(-50%) translateY(0%) translateZ(1.1rem) rotateY(90deg);
}
span:nth-child(5) {
  background-color: rgba(255, 25, 25, 1);
  background-position: 8.8rem 0;
  transform: translateX(0%) translateY(-50%) translateZ(1.1rem) rotateX(90deg);
}
span:nth-child(6) {
  background-color: rgba(25, 25, 255, 1);
  background-position: 11rem 0;
  transform: translateX(0%) translateY(50%) translateZ(1.1rem) rotateX(90deg);
}