body {
  /* This creates the "camera" distance for the 3D effect */
  perspective: 800px;
  background-color: #222; /* Darker background helps 3D stand out */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.spinning-text {
  display: inline-block;
  font-size: 4rem;
  font-family: sans-serif;
  font-weight: 900;
  color: #fff;
  backface-visibility: hidden;
  
  /* The shadow adds "thickness" and a glow */
  text-shadow: 
    0 1px 0 #ccc, 
    0 2px 0 #c5c5c5, 
    0 3px 0 #bbb, 
    0 4px 0 #b5b5b5, 
    0 5px 0 #aaa, 
    0 6px 1px rgba(0,0,0,.1), 
    0 0 5px rgba(0,0,0,.1), 
    0 1px 3px rgba(0,0,0,.3), 
    0 3px 5px rgba(0,0,0,.2), 
    0 5px 10px rgba(0,0,0,.25);

  animation: spin3d 8s linear infinite;

  /* Forces the browser to render with high-quality 3D */
  transform-style: preserve-3d;
}

@keyframes spin3d {
  from {
    transform: rotateY(0deg) rotateX(5deg); /* Slight X tilt makes it look more 3D */
  }
  to {
    transform: rotateY(360deg) rotateX(5deg);
  }
}

/* This applies to phones and small tablets */
@media screen and (max-width: 640px) {
  .spinning-text {
    /* Stop the animation */
    animation: none !important;
    -webkit-animation: none !important;
    
    /* Reset the position so it's not stuck mid-tilt */
    transform: none !important;
    
    /* Optional: Adjust size for smaller screens */
    font-size: 4.0rem; 
    
    /* Keep the 3D depth but keep it static */
    text-shadow: 1px 1px 0px #ccc, 2px 2px 0px #bbb; 
  }
}