main{
  font-size: 100px;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 10em;
  perspective-origin: 50% calc(50% - 3em);

}

.scene{
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 30s linear infinite;

  
}

.floor{
  width: 15em;
  height: 15em;
  position: absolute;
  top: 1em;
  background-image: 
    radial-gradient(rgb(32 32 32 /.75) 10%,rgb(32 32 32 /.05) 20%, rgb(32 32 32 / 1) 60%),
    repeating-conic-gradient(from 45deg, rgb(240 240 240 /.5) 0deg 90deg, rgb(64 64 64 /.5) 90deg 180deg);
  background-size: 100%, 1em 1em;
  transform: translate(-50%, -50%) rotateX(90deg);

}

.cube{
  position: absolute;
  width: 2em;
  height: 2em;
  transform-style: preserve-3d;
  /* animation: rotate 5s linear infinite; */
  top: -1em;
  left: -1em;

}

.center{
  position: absolute; 
  width: 0.25em;
  height: 0.25em;
  border-radius: 50%;
  background-color: rgb(240 64 250 / 1);
  transform: translate(-50%, -50%);
}

.front, .back, .left, .right{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgb(33 66 99 /0.5);
  box-shadow: inset 0 0 0.5em 0 rgb(12 24 36 / 0.75);
}

.front{
  transform: translateZ(1em);
}

.back{
  transform: rotateY(180deg) translateZ(1em);
  /* transform: translateZ(1em) rotateY(180deg); */
}

.right{
  transform: rotateY(90deg) translateZ(1em);
}

.left{
  transform: rotateY(-90deg) translateZ(1em);
}

.top{
  transform: rotateX(90deg) translateZ(1em);
  width: 2em;
  height: 2em;
  background-color: rgba(57, 109, 162, 0.25);    
  background-image: radial-gradient(rgb(32 32 32 / 0.75) 20%, rgb(32 32 32 / 0.05) 33%);
}

.bottom{
  transform: rotateY(90deg) translateZ(1em);
}

.ball{
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  left: -.5em;
  bottom: 1em;
  background-image: radial-gradient(circle at top, rgb(33 66 99 / 0.9), rgb(0 33 66 / 1));
  animation: rotate 30s linear infinite reverse;
}

/** @keyframe animations */

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

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

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