body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    background: radial-gradient(circle, #000000 50%, #000314 95%);
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  
  
  .chronosphere {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200vw; 
    height: 200vh;
    transform: translate(-50%, -50%);
    z-index: 0; 
  }
  
  .chronospheres {
    width: 100%;
    height: 100%;
    perspective: 2000px; 
  }
  
  .chronospherec {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: chronosphererc 35s linear infinite;
  }
  
  
  
  .chronospheref {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1); 
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.05);
  }
  
  .chronospheref.f  { transform: rotateY(0deg) translateZ(70vh); }
  .chronospheref.b   { transform: rotateY(180deg) translateZ(70vh); }
  .chronospheref.r  { transform: rotateY(90deg) translateZ(70vh); }
  .chronospheref.l   { transform: rotateY(-90deg) translateZ(70vh); }
  .chronospheref.t    { transform: rotateX(90deg) translateZ(70vh); }
  .chronospheref.bt { transform: rotateX(-90deg) translateZ(70vh); }
  
  
  @keyframes chronosphererc {
    0%   { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
  }
  
  .chronospherefg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .chronosphereso {
    font-size: 5rem;
    font-weight: bold;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.5);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  }
  
  .chronospherect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
  }
  
  .chronospheremt {
    font-size: clamp(2rem, 8vw, 6rem);
    font-weight: bold;
    background: linear-gradient(323deg, #8b0000, #ff8c00, #ffff00, #006400, #00bfff, #00008b, #8a2be2, #8b0000);
    background-size: 300% 100%; 
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: chronospherera 7s linear infinite;
    padding: 20px 40px;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
  }
  
  .chronospherest {
    font-size: 2rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 20px;
  }
  
  
  @keyframes chronospherera {
    0% {
      background-position: 0% 0%;
    }
    100% {
      background-position: 300% 0%;
    }
  }
  
  
  
  @media (orientation: landscape) {
    .chronospherefg {
      flex-direction: row; 
      justify-content: space-between;
      align-items: center;
    }
  
    .chronosphereso {
      align-self: flex-start; 
    }
  
  }