body {
      font-family: "Alumni Sans", sans-serif;
      background: url('./assets/images/bg.png') no-repeat center center / cover;
      color: #060a1a;
      min-height: 100dvh;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }

    .container {
      text-align: center;
      width: 90%;
      max-width: 600px;
    }

    h1 {
      font-size: clamp(2.5rem, 6vw, 4rem);
      color: #00b4d8;
      font-weight: 300;
      margin-bottom: 0.5rem;
    }

    h1 span {
      font-weight: 600;
    }

    h3 {
      font-size: clamp(1rem, 2vw, 1.4rem);
      color: #00b4d8;
      margin-bottom: 2rem;
      max-width: 75%;
      margin-inline: auto;
      font-weight: 500;
    }

    img {
      margin-bottom: -3px;
    }

    .shadow__btn {
      padding: 10px 20px;
      font-size: clamp(1rem, 4vw, 1.4rem);
      color: #fff;
      border: none;
      border-radius: 7px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      background: rgb(0 180 216);
      box-shadow: 0 0 25px rgb(0 180 216);
      transition: 0.5s box-shadow;
      text-decoration: none;
    }

    .shadow__btn:hover {
      box-shadow: 0 0 5px rgb(0 180 216),
                  0 0 25px rgb(0,140,255),
                  0 0 50px rgb(0,140,255),
                  0 0 100px rgb(0,140,255);
    }

    .credit {
      margin-top: 2rem;
      font-size: 1rem;
      color: #aaa;
    }

    .credit a {
      color: #00b4d8;
      text-decoration: none;
      margin-left: 0.2rem;
    }

    .credit a:hover {
      text-decoration: underline;
    }

    footer {
      margin-top: 2rem;
      text-align: center;
      font-size: 1.1rem;
      color: #ccc;
      max-width: 90%;
    }

    @media (max-width: 480px) {
      footer {
        font-size: 0.95rem;
      }
    }