nav{
  position: absolute;
  z-index: 10;
  color: white;
  font-size: 5em;
}

main{
    font-size: 100px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, rgb(26, 26, 26) 0%, rgb(18, 18, 18) 100%);
  
    /* perspective & perspective-origin */
    perspective: 10em;
    perspective-origin: 10% calc(50% - 3em);
  }

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

  
  .cube{
    position: absolute;
    width: 2em;
    height: 2em;
    animation: rotate 20s linear infinite reverse; 
  
    /* transform-style */
    transform-style: preserve-3d;
  
    /* top & left -1em */
    top: -1em;
    left: -1em;
   
  
    /* animation: rotate 5s linear infinite; */
  }
  
  .center{
    position: absolute; 
    width: 0.5em;
    height: 0.25em;
    border-radius: 50%;
    background-color: rgb(240 64 250 / 1);
    transform: translate(-50%, -50%);
    
  }
  
  .front, .back, .left, .right, .top, .bottom {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(85, 93, 100, 0.367);
    box-shadow: inset 0 0 0.5em 0 rgba(11, 13, 14, 0.763), 0 0 0.5em 0 rgba(255, 255, 255, 0.028);
  }
  
  /* transform: rotateY(180deg) translateZ(1em); */
  .front{
    transform: rotateY(180deg) translateZ(1em); 
    
  }
  
  .back{
    transform: rotateY(180deg) translateZ(-1em);
    
  }
  
  .right{
    transform: rotateY(90deg) translateZ(1em);
    
  }
  
  .left{
    transform: rotateY(90deg) translateZ(-1em);
   
 
  }
  
  .top{
    transform: rotateX(90deg) translateZ(1em);
    
  }
  
  .bottom{
    transform: rotateX(90deg) translateZ(-1em);
    
    
  }
  
  .ball{
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    left: -.7em;
    bottom: -.8em;
  
    
  }
  
  /** @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);
    }
  } */