.cube-container {
  width: 200px;
  height: 200px;
  perspective: 1000px;
  margin: 0 auto;
  position: relative;
  top: 30vh;
  left: 0;
  animation: bounce 10s infinite ease;
}

.cube {
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  position: relative;
  will-change: transform;
  animation: spin 12s infinite ease-in-out !important;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #bbb;
  background: linear-gradient(0deg, rgba(70, 70, 70, 0.2) 0px, rgba(70, 70, 70, 0.2) 1px, transparent 1px, transparent 21px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.top {
  transform: rotateX(90deg) translateZ(98px);
  background-image: url(CubeTop.webp);
}

.bottom {
  transform: rotateX(-90deg) translateZ(98px);
  background-image: url(jhallBottom.webp);
}


.right {
  transform: rotateY(90deg) translateZ(98px);
  background-image: url(jhallSide.webp);
}

.left {
  transform: rotateY(-90deg) translateZ(98px);
  background-image: url(jhallSide.webp);
}

.front {
  transform: rotateX(0deg) translateZ(98px);
  background-image: url(jhallFront.webp);
}

.back {
  transform: rotateX(180deg) translateZ(98px);
  background-image: url(jhallBack.webp) 
}


@keyframes spin {
  0% {
      transform: rotateY(0deg) rotateY(0deg);
  }

  30% {
      transform: rotateY(360deg) rotateY(360deg);
  }

  40% {
      transform: rotateX(0deg) rotateY(0deg);
  }

  100% {
      transform: rotateX(360deg) rotateY(360deg);
  }
}

@media screen and (max-width: 480px) {
  
.cube-container {
    width: 150px;
    height: 150px;
    top: 35vh;
}
.myCubecube-container {
  display: none;
}

.top {
    transform: rotateX(90deg) translateZ(73px);
}
.bottom {
    transform: rotateX(-90deg) translateZ(73px);
}
.right {
    transform: rotateY(90deg) translateZ(73px);
}
.left {
    transform: rotateY(-90deg) translateZ(73px);
}
.front {
    transform: rotateX(0deg) translateZ(73px);
}
.back {
    transform: rotateX(180deg) translateZ(73px);
}
}

/*BOUNCE ANIMATION*/
@keyframes bounce {

  0% {
    transform: translateY(0);
  }

  10% {
    transform: translateY(3rem);

  }

  20% {
    transform: translateY(0);

  }

  30% {
    transform: translateY(3rem);

  }

  40% {
    transform: translateY(0);

  }

  50% {
    transform: translateY(3rem);

  }

  60% {
    transform: translateY(0);

  }

  70% {
    transform: translateY(3rem);

  }

  80% {
    transform: translateY(0);

  }

  90% {
    transform: translateY(3rem);

  }

  100% {
    transform: translateY(0);
  }
}


#cube-base {
  max-width: 800px;
  position: absolute;
  left: 3rem;
  bottom: 11rem;
  border-radius: 100px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}


/*ALL @MEDIA QUERIES LOCATED IN MAIN STYLES.CSS*/