main{
  font-size: 100px;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  /* perspective & perspective-origin */
  perspective: 10em;
  perspective-origin: 10% calc(50% - 3em);

}

.scene{

  position: relative;
  /**** transform-style: ****/
  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);

  /* animation: rotate 12s infinite linear reverse; */

}

.cube{
  position: absolute;
  width: 2em;
  height: 2em;
  /* transform-style */
  transform-style: preserve-3d;
  /* top & left -1em */
  top: -1em;
  left: -1em;

  /* transform: translate(-50%, -50%); */

  /* animation: rotate 5s linear infinite; */
  animation: rotate 6s linear infinite;
  

}

.center{
  position: absolute; 
  width: 0.25em;
  height: 0.25em;
  border-radius: 50%;
  background-color: rgb(240 64 250 / 1);
  /* move center of center to center of scene */
  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); */
}

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

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

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

.left{
 
}

.top{
  
}

.bottom{
  
}

.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);
  }
} */