/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*specifically for the cube;*/
.cube p {
  margin: 0;
}

.cubeC {
  width: 6rem;
  height: 6rem;
  text-align: center;
  -webkit-perspective: 20rem;
  perspective: 20rem;
  position: relative;
  top: 0;
  margin-top: 2rem;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transform: rotateX(-25deg) rotateY(90deg);
  transform: rotateX(-25deg) rotateY(90deg);
  -webkit-animation-name: theCube;
  animation-name: theCube;
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.cube:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
@-webkit-keyframes theCube {
  0% {
    -webkit-transform: rotateY(0) rotateX(-25deg);
    transform: rotateY(0) rotateX(-25deg);
  }
  25% {
    -webkit-transform: rotateY(90deg) rotateX(0) rotateZ(-25deg);
    transform: rotateY(90deg) rotateX(0) rotateZ(-25deg);
  }
  50% {
    -webkit-transform: rotateY(180deg) rotateX(25deg) rotateZ(0);
    transform: rotateY(180deg) rotateX(25deg) rotateZ(0);
  }
  75% {
    -webkit-transform: rotateY(270deg) rotateX(0) rotateZ(25deg);
    transform: rotateY(270deg) rotateX(0) rotateZ(25deg);
  }

  100% {
    -webkit-transform: rotateY(359deg) rotateX(-25deg);
    transform: rotateY(359deg) rotateX(-25deg);
  }
}
@keyframes theCube {
  0% {
    -webkit-transform: rotateY(0) rotateX(-25deg);
    transform: rotateY(0) rotateX(-25deg);
  }
  25% {
    -webkit-transform: rotateY(90deg) rotateX(0) rotateZ(-25deg);
    transform: rotateY(90deg) rotateX(0) rotateZ(-25deg);
  }
  50% {
    -webkit-transform: rotateY(180deg) rotateX(25deg) rotateZ(0);
    transform: rotateY(180deg) rotateX(25deg) rotateZ(0);
  }
  75% {
    -webkit-transform: rotateY(270deg) rotateX(0) rotateZ(25deg);
    transform: rotateY(270deg) rotateX(0) rotateZ(25deg);
  }

  100% {
    -webkit-transform: rotateY(359deg) rotateX(-25deg);
    transform: rotateY(359deg) rotateX(-25deg);
  }
}

.cube-side {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  border: 1px solid rgba(200, 200, 200, 1);
  color: white;
  font-weight: bold;
}

.cube-side:nth-child(1) {
  -webkit-transform: rotateY(0deg) translateZ(3rem);
  transform: rotateY(0deg) translateZ(3rem);
}

.cube-side:nth-child(2) {
  -webkit-transform: rotateY(90deg) translateZ(3rem);
  transform: rotateY(90deg) translateZ(3rem);
}

.cube-side:nth-child(3) {
  -webkit-transform: rotateY(180deg) translateZ(3rem);
  transform: rotateY(180deg) translateZ(3rem);
}

.cube-side:nth-child(4) {
  -webkit-transform: rotateY(-90deg) translateZ(3rem);
  transform: rotateY(-90deg) translateZ(3rem);
}

.cube-side:nth-child(5) {
  -webkit-transform: rotateX(-90deg) translateZ(3rem);
  transform: rotateX(-90deg) translateZ(3rem);
}

.cube-side:nth-child(6) {
  -webkit-transform: rotateX(90deg) translateZ(3rem);
  transform: rotateX(90deg) translateZ(3rem);
}