* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
}

.container {
  perspective: 600px;
  filter: drop-shadow(0px 0px 250px #955f3f);
}

.cube {
  position: relative;
  width: min(30vh, 30vw);
  height: min(30vh, 30vw);
  transform-style: preserve-3d;
  animation: spin 8s linear infinite;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.face img {
  max-width: 100%;
}

.left {
  transform: rotateY(-90deg) translateZ(min(15vh, 15vw));
}

.front {
  transform: rotateY(0deg) translateZ(min(15vh, 15vw));
}

.back {
  transform: rotateY(180deg) translateZ(min(15vh, 15vw));
}

.right {
  transform: rotateY(90deg) translateZ(min(15vh, 15vw));
}

.top {
  transform: rotateX(90deg) translateZ(min(15vh, 15vw));
}

.bottom {
  transform: rotateX(-90deg) translateZ(min(15vh, 15vw));
}

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

  to {
    transform: rotateY(360deg);
  }
}