/* Set up the styles for the cube */
.cube {
  position: relative;
  width: 200px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin: bottom;
  transform-style: preserve-3d;
  transition-duration: 0.5s;
}

.cube .face {
  position: absolute;
  width: 200px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin: bottom;
}

.cube .front {
  background: url(../../Gifs/alpha_04.gif);
  background-size: cover;
  background-color: black;
  transform: translateZ(100px);
  border: 1px solid #965162;
}

.cube .back {
  background: url(../../Gifs/alpha_04.gif);
  background-size: cover;
  background-color: black;
  transform: rotateY(180deg) translateZ(100px);
  border: 1px solid #965162;
}

.cube .left {
  background: url(../../Gifs/alpha_04.gif);
  background-size: cover;
  background-color: black;
  transform: rotateY(-90deg) translateZ(100px);
  border: 1px solid #965162;
}

.cube .right {
  background: url(../../Gifs/alpha_04.gif);
  background-size: cover;
  background-color: black;
  transform: rotateY(90deg) translateZ(100px);
  border: 1px solid #965162;
}

.cube .top {
  background: url(../../Gifs/alpha_04.gif);
  background-size: cover;
  background-color: black;
  transform: rotateX(90deg) translateZ(100px);
  border: 1px solid #965162;
}

.cube .bottom {
  background: url(../../Gifs/alpha_04.gif);
  background-size: cover;
  background-color: black;
  transform: rotateX(-90deg) translateZ(100px);
  border: 1px solid #965162;
}

/* Add the mouse move event listener to rotate the cube */
body {
  perspective: 1000px;
}

.cube:hover {
  animation: none;
}

.cube:hover {
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateX(0deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(360deg);
  }
}

@media (min-width: 768px) {
  .cube:hover {
    animation: none;
  }
  .cube:hover {
    animation: rotate 15s linear infinite;
  }
}

@media (min-width: 992px) {
  .cube:hover {
    animation: none;
  }
  .cube:hover {
    animation: rotate 10s linear infinite;
  }
}

@media (min-width: 1200px) {
  .cube:hover {
    animation: none;
  }
  .cube:hover {
    animation: rotate 5s linear infinite;
  }
}