@keyframes rotate {
  from {
    transform: rotateY(-30deg) rotateX(-30deg);
  }
  to {
    transform: rotateY(690deg) rotateX(-30deg);
  }
}

@keyframes spinTopRow {
  0% {
    transform: rotateY(0deg);
  }
  5% {
    transform: rotateY(90deg);
  }
  45% {
    transform: rotateY(90deg);
  }
  50% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes spinMiddleColumn {
  25% {
    transform: rotateX(0deg);
  }
  35% {
    transform: rotateX(90deg);
  }
  75% {
    transform: rotateX(90deg);
  }
  85% {
    transform: rotateX(360deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

@keyframes spinMiddleRow {
  40% {
    transform: rotateY(0deg);
  }
  45% {
    transform: rotateY(90deg);
  }
  90% {
    transform: rotateY(90deg);
  }
  95% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes makeOpaque1 {
  0% {
    opacity: 1;
  }
  0.01% {
    opacity: 0;
  }
  4.99% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
}

@keyframes makeOpaque2 {
  44.99% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  49.99% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes makeOpaque3 {
  24.99% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  34.99% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
}

@keyframes makeOpaque4 {
  74.99% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  89.99% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
}

@keyframes makeOpaque5 {
  39.99% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  44.99% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
}

@keyframes makeOpaque6 {
  89.99% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  94.99% {
    opacity: 0;
  }
  95% {
    opacity: 1;
  }
}

@keyframes makeOpaque7 {
  74.99% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  89.99% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
}

body {
  height: 100%;
  width: 100%;
  background: #fff;
}

#cube-animation {
  perspective: 800px;
  margin: 10vh auto;
  height: 22em;
  width: 22em;
  position: relative;
  background: rgb(237, 42, 58);
  background: radial-gradient(circle, rgba(0, 0, 0, 0.5) 0%, #fff 40%);
}

#cube-animation .rubiks-cube {
  width: 12em;
  height: 12em;
  margin: 5em;
  position: absolute;
  -webkit-animation: rotate 20s infinite linear;
  animation: rotate 20s infinite linear;
  transform-style: preserve-3d;
  transform: rotateY(-30deg) rotateX(-30deg) scale3d(0.7, 0.7, 0.7);
}

#cube-animation .top-clone {
  z-index: 100;
  position: absolute;
  width: 12em;
  height: 12em;
  transform-style: preserve-3d;
  -webkit-animation: spinTopRow 20s infinite linear;
  animation: spinTopRow 20s infinite linear;
}

#cube-animation .top-clone .clone-left {
  left: 0;
}

#cube-animation .top-clone .clone-left .left-one {
  background: rgba(237, 42, 58, 1);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-clone .clone-left .left-two {
  -webkit-animation: makeOpaque3 20s infinite linear;
  animation: makeOpaque3 20s infinite linear;
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-clone .clone-left .left-three {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-clone .clone-middle {
  left: 4em;
  -webkit-animation: makeOpaque7 20s infinite linear;
  animation: makeOpaque7 20s infinite linear;
}

#cube-animation .top-clone .clone-middle .middle-one {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-clone .clone-middle .middle-two {
  -webkit-animation: makeOpaque3 20s infinite linear;
  animation: makeOpaque3 20s infinite linear;
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-clone .clone-middle .middle-three {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-clone .clone-right {
  left: 8em;
}

#cube-animation .top-clone .clone-right .right-one {
  background: rgba(237, 42, 58, 0.8);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-clone .clone-right .right-two {
  -webkit-animation: makeOpaque3 20s infinite linear;
  animation: makeOpaque3 20s infinite linear;
  background: rgba(237, 42, 58, 0.8);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-clone .clone-right .right-three {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-row, #cube-animation .middle-row, #cube-animation .bottom-row {
  position: absolute;
  top: 0;
  width: 12em;
  height: 4em;
  transform-style: preserve-3d;
}

#cube-animation .top-row {
  top: 0;
  -webkit-animation: spinTopRow 20s infinite linear;
  animation: spinTopRow 20s infinite linear;
}

#cube-animation .top-row .front .front-one {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-row .front .front-two {
  -webkit-animation: makeOpaque4 20s infinite linear;
  animation: makeOpaque4 20s infinite linear;
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-row .front .front-three {
  background: rgba(237, 42, 58, 0.8);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-row .left .left-one {
  background: rgba(237, 42, 58, 0.8);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-row .left .left-two {
  -webkit-animation: makeOpaque3 20s infinite linear;
  animation: makeOpaque3 20s infinite linear;
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-row .left .left-three {
  background: rgba(237, 42, 58, 1);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-row .back .back-one {
  background: rgba(237, 42, 58, 1);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-row .back .back-two {
  -webkit-animation: makeOpaque4 20s infinite linear;
  animation: makeOpaque4 20s infinite linear;
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-row .back .back-three {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-row .right .right-one {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-row .right .right-two {
  -webkit-animation: makeOpaque3 20s infinite linear;
  animation: makeOpaque3 20s infinite linear;
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .top-row .right .right-three {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-row {
  top: 4em;
  -webkit-animation: spinMiddleRow 20s infinite linear;
  animation: spinMiddleRow 20s infinite linear;
}

#cube-animation .middle-row .front .front-one {
  background: rgba(237, 42, 58, 0.8);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-row .front .front-two {
  -webkit-animation: makeOpaque3 20s infinite linear;
  animation: makeOpaque3 20s infinite linear;
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-row .front .front-three {
  background: rgba(237, 42, 58, 1);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-row .left .left-one {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-row .left .left-two {
  -webkit-animation: makeOpaque4 20s infinite linear;
  animation: makeOpaque4 20s infinite linear;
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-row .left .left-three {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-row .back .back-one {
  background: rgba(237, 42, 58, 1);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-row .back .back-two {
  -webkit-animation: makeOpaque3 20s infinite linear;
  animation: makeOpaque3 20s infinite linear;
  background: rgba(237, 42, 58, 0.8);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-row .back .back-three {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-row .right .right-one {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-row .right .right-two {
  -webkit-animation: makeOpaque4 20s infinite linear;
  animation: makeOpaque4 20s infinite linear;
  background: rgba(237, 42, 58, 0.8);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-row .right .right-three {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .bottom-row {
  top: 8em;
}

#cube-animation .bottom-row .left .left-one {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .bottom-row .left .left-two {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .bottom-row .left .left-three {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .bottom-row .right .right-one {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .bottom-row .right .right-two {
  background: rgba(237, 42, 58, 1);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .bottom-row .right .right-three {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .row-face {
  position: absolute;
  display: block;
  width: 12em;
  height: 4em;
  top: 0;
}

#cube-animation .row-face :nth-child(1) {
  left: 0em;
  top: 50%;
  margin-top: -1.75em;
  margin-left: 0.25em;
}

#cube-animation .row-face :nth-child(2) {
  left: 4em;
  top: 50%;
  margin-top: -1.75em;
  margin-left: 0.25em;
}

#cube-animation .row-face :nth-child(3) {
  left: 8em;
  top: 50%;
  margin-top: -1.75em;
  margin-left: 0.25em;
}

#cube-animation .row-face.front {
  transform: translateZ(6em);
}

#cube-animation .row-face.left {
  transform: rotateY(-90deg) translateZ(6em);
}

#cube-animation .row-face.back {
  transform: rotateY(-180deg) translateZ(6em);
}

#cube-animation .row-face.right {
  transform: rotateY(90deg) translateZ(6em);
}

#cube-animation .left-column, #cube-animation .middle-column, #cube-animation .right-column {
  position: absolute;
  width: 4em;
  height: 12em;
  top: 0;
  transform-style: preserve-3d;
}

#cube-animation .left-column {
  left: 0;
}

#cube-animation .left-column .front .front-three {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .left-column .back .back-one {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .left-column .bottom .bottom-one {
  background: rgba(237, 42, 58, 1);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .left-column .bottom .bottom-two {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .left-column .bottom .bottom-three {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-column {
  left: 4em;
  -webkit-animation: spinMiddleColumn 20s infinite linear;
  animation: spinMiddleColumn 20s infinite linear;
}

#cube-animation .middle-column .front {
  -webkit-animation: makeOpaque2 20s infinite linear;
  animation: makeOpaque2 20s infinite linear;
}

#cube-animation .middle-column .front .front-one {
  -webkit-animation: makeOpaque1 20s infinite linear;
  animation: makeOpaque1 20s infinite linear;
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-column .front .front-two {
  -webkit-animation: makeOpaque6 20s infinite linear;
  animation: makeOpaque6 20s infinite linear;
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-column .front .front-three {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-column .top {
  -webkit-animation: makeOpaque1 20s infinite linear;
  animation: makeOpaque1 20s infinite linear;
}

#cube-animation .middle-column .top .top-one {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-column .top .top-two {
  -webkit-animation: makeOpaque5 20s infinite linear;
  animation: makeOpaque5 20s infinite linear;
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-column .top .top-three {
  -webkit-animation: makeOpaque2 20s infinite linear;
  animation: makeOpaque2 20s infinite linear;
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-column .back .back-one {
  background: rgba(237, 42, 58, 0.8);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-column .back .back-two {
  -webkit-animation: makeOpaque6 20s infinite linear;
  animation: makeOpaque6 20s infinite linear;
  background: rgba(237, 42, 58, 0.8);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-column .back .back-three {
  -webkit-animation: makeOpaque1 20s infinite linear;
  animation: makeOpaque1 20s infinite linear;
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-column .bottom .bottom-one {
  -webkit-animation: makeOpaque2 20s infinite linear;
  animation: makeOpaque2 20s infinite linear;
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-column .bottom .bottom-two {
  -webkit-animation: makeOpaque5 20s infinite linear;
  animation: makeOpaque5 20s infinite linear;
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .middle-column .bottom .bottom-three {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .right-column {
  left: 8em;
}

#cube-animation .right-column .front .front-three {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .right-column .back .back-one {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .right-column .bottom .bottom-one {
  background: rgba(241, 89, 92, 0.2);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .right-column .bottom .bottom-two {
  background: rgba(237, 42, 58, 1);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .right-column .bottom .bottom-three {
  background: rgba(237, 42, 58, 1);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 40px rgba(237, 42, 58, 0.5));
}

#cube-animation .column-face {
  position: absolute;
  display: block;
  width: 4em;
  height: 12em;
  left: 0;
}

#cube-animation .column-face :nth-child(1) {
  top: 0em;
  left: 50%;
  margin-left: -1.75em;
  margin-top: 0.25em;
}

#cube-animation .column-face :nth-child(2) {
  top: 4em;
  left: 50%;
  margin-left: -1.75em;
  margin-top: 0.25em;
}

#cube-animation .column-face :nth-child(3) {
  top: 8em;
  left: 50%;
  margin-left: -1.75em;
  margin-top: 0.25em;
}

#cube-animation .column-face.front {
  transform: translateZ(6em);
}

#cube-animation .column-face.top {
  transform: rotateX(90deg) translateZ(6em);
}

#cube-animation .column-face.back {
  transform: rotateX(180deg) translateZ(6em);
}

#cube-animation .column-face.bottom {
  transform: rotateX(-90deg) translateZ(6em);
}