body{  
  --cell-size: 3.6em;
  --cell-mt: 0.25em;
  --cell-ml: -1.75em;
     overflow-x: hidden;
}

.cube-container {
  transform: scale(2.3);
  height: 22em;
  
  position: relative;
  border-radius: 10%;
  margin-top: 10vw;
  margin-left: calc(25vw - 350px);
}
.cube-container .rubiks-cube {
  width: 12em;
  height: 12em;
  margin: 5em;
  position: absolute;
  animation: rotate 25s infinite linear;
  transform-style: preserve-3d;
  transform: rotateY(-30deg) rotateX(-30deg) scale3d(0.7, 0.7, 0.7);
}

@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;
  }
}


.cube-container .top-clone {
  z-index: 100;
  position: absolute;
  width: 12em;
  height: 12em;
  transform-style: preserve-3d;
  animation: spinTopRow 20s infinite ease-out;
}
.cube-container .top-clone .clone-left {
  left: 0;
}
.cube-container .top-clone .clone-left .left-one {
  background: #C41E3A;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-clone .clone-left .left-two {
  animation: makeOpaque3 20s infinite ease-out;
  background: var(--color-green);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-clone .clone-left .left-three {
  background: var(--color-blue);;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-clone .clone-middle {
  left: 4em;
  animation: makeOpaque7 20s infinite ease-out;
}
.cube-container .top-clone .clone-middle .middle-one {
  background: var(--color-white);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-clone .clone-middle .middle-two {
  animation: makeOpaque3 20s infinite ease-out;
  background: var(--color-blue);;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-clone .clone-middle .middle-three {
  background: var(--color-green);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-clone .clone-right {
  left: 8em;
}
.cube-container .top-clone .clone-right .right-one {
  background: var(--color-orange);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-clone .clone-right .right-two {
  animation: makeOpaque3 20s infinite ease-out;
  background: var(--color-orange);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-clone .clone-right .right-three {
  background: var(--color-white);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-row, .cube-container .middle-row, .cube-container .bottom-row {
  position: absolute;
  top: 0;
  width: 12em;
  height: 4em;
  transform-style: preserve-3d;
}
.cube-container .top-row {
  top: 0;
  animation: spinTopRow 20s infinite ease-out;
}
.cube-container .top-row .front .front-one {
  background: var(--color-green);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-row .front .front-two {
  animation: makeOpaque4 20s infinite ease-out;
  background: var(--color-white);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-row .front .front-three {
  background: var(--color-orange);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-row .left .left-one {
  background: var(--color-orange);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-row .left .left-two {
  animation: makeOpaque3 20s infinite ease-out;
  background: var(--color-white);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-row .left .left-three {
  background: #C41E3A;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-row .back .back-one {
  background: #C41E3A;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-row .back .back-two {
  animation: makeOpaque4 20s infinite ease-out;
  background: var(--color-blue);;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-row .back .back-three {
  background: var(--color-yellow);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-row .right .right-one {
  background: var(--color-white);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-row .right .right-two {
  animation: makeOpaque3 20s infinite ease-out;
  background: var(--color-blue);;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .top-row .right .right-three {
  background: var(--color-green);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-row {
  top: 4em;
  animation: spinMiddleRow 20s infinite ease-out;
}
.cube-container .middle-row .front .front-one {
  background: var(--color-orange);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-row .front .front-two {
  animation: makeOpaque3 20s infinite ease-out;
  background: var(--color-blue);;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-row .front .front-three {
  background: #C41E3A;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-row .left .left-one {
  background: var(--color-white);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-row .left .left-two {
  animation: makeOpaque4 20s infinite ease-out;
  background: var(--color-blue);;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-row .left .left-three {
  background: var(--color-yellow);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-row .back .back-one {
  background: #C41E3A;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-row .back .back-two {
  animation: makeOpaque3 20s infinite ease-out;
  background: var(--color-orange);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-row .back .back-three {
  background: var(--color-green);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-row .right .right-one {
  background: var(--color-yellow);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-row .right .right-two {
  animation: makeOpaque4 20s infinite ease-out;
  background: var(--color-orange);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-row .right .right-three {
  background: var(--color-green);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .bottom-row {
  top: 8em;
}
.cube-container .bottom-row .left .left-one {
  background: var(--color-white);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .bottom-row .left .left-two {
  background: var(--color-blue);;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .bottom-row .left .left-three {
  background: var(--color-yellow);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .bottom-row .right .right-one {
  background: var(--color-yellow);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .bottom-row .right .right-two {
  background: #C41E3A;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .bottom-row .right .right-three {
  background: var(--color-green);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .row-face {
  position: absolute;
  display: block;
  width: 12em;
  height: 4em;
  top: 0;
}
.cube-container .row-face :nth-child(1) {
  left: 0em;
  top: 50%;
  margin-top: -1.75em;
  margin-left: var(--cell-mt);
}
.cube-container .row-face :nth-child(2) {
  left: 4em;
  top: 50%;
  margin-top: -1.75em;
  margin-left: var(--cell-mt);
}
.cube-container .row-face :nth-child(3) {
  left: 8em;
  top: 50%;
  margin-top: -1.75em;
  margin-left: var(--cell-mt);
}
.cube-container .row-face.front {
  transform: translateZ(6em);
}
.cube-container .row-face.left {
  transform: rotateY(-90deg) translateZ(6em);
}
.cube-container .row-face.back {
  transform: rotateY(-180deg) translateZ(6em);
}
.cube-container .row-face.right {
  transform: rotateY(90deg) translateZ(6em);
}
.cube-container .left-column, .cube-container .middle-column, .cube-container .right-column {
  position: absolute;
  width: 4em;
  height: 12em;
  top: 0;
  transform-style: preserve-3d;
}
.cube-container .left-column {
  left: 0;
}
.cube-container .left-column .front .front-three {
  background: var(--color-green);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .left-column .back .back-one {
  background: var(--color-yellow);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .left-column .bottom .bottom-one {
  background: #C41E3A;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .left-column .bottom .bottom-two {
  background: var(--color-yellow);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .left-column .bottom .bottom-three {
  background: var(--color-green);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-column {
  left: 4em;
  animation: spinMiddleColumn 20s infinite ease-out;
}
.cube-container .middle-column .front {
  animation: makeOpaque2 20s infinite ease-out;
}
.cube-container .middle-column .front .front-one {
  animation: makeOpaque1 20s infinite ease-out;
  background: var(--color-white);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-column .front .front-two {
  animation: makeOpaque6 20s infinite ease-out;
  background: var(--color-blue);;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-column .front .front-three {
  background: var(--color-green);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-column .top {
  animation: makeOpaque1 20s infinite ease-out;
}
.cube-container .middle-column .top .top-one {
  background: var(--color-white);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-column .top .top-two {
  animation: makeOpaque5 20s infinite ease-out;
  background: var(--color-blue);;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-column .top .top-three {
  animation: makeOpaque2 20s infinite ease-out;
  background: var(--color-green);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-column .back .back-one {
  background: var(--color-orange);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-column .back .back-two {
  animation: makeOpaque6 20s infinite ease-out;
  background: var(--color-orange);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-column .back .back-three {
  animation: makeOpaque1 20s infinite ease-out;
  background: var(--color-blue);;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-column .bottom .bottom-one {
  animation: makeOpaque2 20s infinite ease-out;
  background: var(--color-white);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-column .bottom .bottom-two {
  animation: makeOpaque5 20s infinite ease-out;
  background: var(--color-blue);;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .middle-column .bottom .bottom-three {
  background: var(--color-green);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .right-column {
  left: 8em;
}
.cube-container .right-column .front .front-three {
  background: var(--color-blue);;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .right-column .back .back-one {
  background: var(--color-yellow);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .right-column .bottom .bottom-one {
  background: var(--color-white);
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .right-column .bottom .bottom-two {
  background: #C41E3A;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .right-column .bottom .bottom-three {
  background: #C41E3A;
  position: absolute;
  display: block;
  width: 3.6em;
  height: 3.6em;
  border-radius: 15%;
}
.cube-container .column-face {
  position: absolute;
  display: block;
  width: 4em;
  height: 12em;
  left: 0;
}
.cube-container .column-face :nth-child(1) {
  top: 0em;
  left: 50%;
  margin-left: -1.75em;
  margin-top: var(--cell-mt);
}
.cube-container .column-face :nth-child(2) {
  top: 4em;
  left: 50%;
  margin-left: -1.75em;
  margin-top: var(--cell-mt);
}
.cube-container .column-face :nth-child(3) {
  top: 8em;
  left: 50%;
  margin-left: -1.75em;
  margin-top: var(--cell-mt);
}
.cube-container .column-face.front {
  transform: translateZ(6em);
}
.cube-container .column-face.top {
  transform: rotateX(90deg) translateZ(6em);
}
.cube-container .column-face.back {
  transform: rotateX(180deg) translateZ(6em);
}
.cube-container .column-face.bottom {
  transform: rotateX(-90deg) translateZ(6em);
}

@media (max-width: 1450px) {
  .cube-container {
    transform: scale(1.8);
    margin-left: calc(25vw - 300px);
  }
}

@media (max-width: 1100px) {
  .cube-container {
    margin:0 auto;
    width: 22em;
    margin-top: 200px;
  }
}

@media (max-width: 800px) {
  .cube-container {
    transform: scale(1.65);
    margin-top: 130px;
    margin-bottom: 20vw;
  }
}

@media (max-width: 600px) {
  .cube-container {
    transform: scale(1.37);
    margin-top: 100px;
  }
}

@media (max-width: 500px) {
  .cube-container {
    transform: scale(1);
    margin-top: 30px;
  }
}

@media (max-width: 400px) {
  .cube-container {

    transform: scale(0.9);
    margin-top: 0px;
    margin-bottom: 5vw;
  }
}