body {
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: 'Rockwell', serif;
    color: #fff;
  }
  
  .logo-container {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 10;
  }
  
  .logo {
    width: 100px;
    height: auto;
  }
  
  .typing-container {
    font-size: clamp(1rem, 4vw, 1.5rem);
    overflow: hidden;
    text-align: center;
  }
  
  /* Desktop */
  .desktop {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    animation: typingDesktop 3s steps(31) forwards;
  }
  
  /* Mobile */
  .mobile-text {
    display: none;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }
  
  .mobile-text .line1 {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: typing1 2s steps(17) forwards;
  }
  
  .mobile-text .line2 {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: typing2 2s steps(13) 2s forwards;
  }
  
  /* Keyframes */
  @keyframes typingDesktop {
    from { width: 0; }
    to { width: 31ch; }
  }
  
  @keyframes typing1 {
    from { width: 0; }
    to { width: 17ch; }
  }
  
  @keyframes typing2 {
    from { width: 0; }
    to { width: 13ch; }
  }
  
  /* Responsive Rules */
  @media (max-width: 600px) {
    .desktop {
      display: none;
    }
  
    .mobile-text {
      display: flex;
    }
  }