html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font-family: 'Mr Bedfort', cursive;
      box-sizing: border-box;
      overflow: hidden;
    }

    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #000;
      background: linear-gradient(to top, white 10%, rgba(255,255,255,0) 40%), linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.75)), url('img/bg-record.jpg') bottom center / cover no-repeat;
      animation: fadeIn 1.5s ease-in-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    h1 {
      font-size: clamp(5rem, 10vw, 9rem);
      margin: 0;
      line-height: 1.5; 
      padding: 0 0.5em; 
      animation: slideUp 1.2s ease-out;
      /* Add a subtle gradient and shadow for depth and texture */
      background: linear-gradient(to bottom, #4a4a4a, #1e1e1e);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 0 20px rgba(53, 240, 32, 0.3), 0px 3px 5px rgba(230, 216, 55, 0.632);
    }

    @keyframes slideUp {
      from {
        transform: translateY(30px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .stations {
      display: flex;
      gap: 2rem;
      margin-top: 6rem;
      flex-wrap: wrap;
      justify-content: center;
      animation: fadeIn 2s ease-in-out;
    }

    .station img {
      height: 80px;
      width: auto;
      opacity: 0.85;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .station img:hover {
      opacity: 1;
      transform: scale(1.2);
    }

    @media (max-width: 600px) {
      h1 {
        font-size: clamp(5rem, 9vw, 8rem);
      }

      .station img {
        height: 70px;
      }
    }