body {
      margin: 0;
      background: #0b1220;
      height: 100%;
  }

  #title {
      font-size: clamp(2rem, 8vw, 3rem);
      /* scala da 2rem a 3rem a seconda dello schermo */
      margin-bottom: 1rem;
      font-family: 'Fredoka One', sans-serif;
      color: #fffacd;
      text-align: center;
      width: 100%;
      display: block;
      margin-bottom: 1rem;
      position: absolute;
      bottom: 30px;
      left: 0;
      right: 0;
  }

  .button {
      background: #fffacd;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      font-family: 'Fredoka One', sans-serif;
      font-size: clamp(1rem, 3vw, 1.2rem);
      color: #000;
      cursor: pointer;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
      transition: transform 0.2s;
      position: fixed;
      width: clamp(120px, 20vw, 180px);
      height: clamp(45px, 6vw, 60px);
  }

  .paypal-button {
      top: 30px;
      left: 30px;
  }

  .wake-up {
      bottom: 30px;
      right: 30px;
      border-radius: 50%;
      width: 70px;
      height: 70px;
      background: radial-gradient(circle at 30% 30%, #fff, #fffacd 40%, #f0e68c 70%, #d4c68a 100%);
      box-shadow:
          inset -5px -5px 15px rgba(0, 0, 0, 0.2),
          /* ombra interna per la curvatura */
          0 4px 10px rgba(255, 255, 255, 0.2);
      /* leggero bagliore esterno */
      position: fixed;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.3s;
  }

  .wake-up:hover {
      transform: scale(1.05);
      box-shadow:
          inset -5px -5px 15px rgba(0, 0, 0, 0.2),
          0 6px 20px rgba(255, 255, 255, 0.4);
      /* bagliore più evidente al passaggio del mouse */
  }

  /* Optional: piccolo effetto “crateri” */
  .wake-up::before,
  .wake-up::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.1);
  }

  .wake-up::before {
      width: 20px;
      height: 20px;
      top: 25%;
      left: 35%;
  }

  .wake-up::after {
      width: 12px;
      height: 12px;
      bottom: 20%;
      right: 30%;
  }

  @media (max-width: 500px) {
      #title {
          font-size: 2rem;
      }

      #paypal-button {
          width: 140px;
          height: 50px;
          font-size: 1rem;
      }
  }

  svg {
      width: 100%;
      position: absolute;
      top: 15px;
      bottom: 0;
      right: 0;
      left: 0;
      opacity: 0;
      animation: fadeIn 1.5s ease-in forwards;
      height: 100%;
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }

  .stroke {
      stroke: #0b0b0b;
      stroke-width: 3;
      stroke-linejoin: round;
      stroke-linecap: round;
  }


  @keyframes subtlePulseWhite {

      0%,
      100% {
          r: 1.5;
      }

      50% {
          r: 1.7;
      }
  }

  .pupil-white {
      animation: subtlePulseWhite 3s infinite ease-in-out;
  }
#donate-button{
    cursor: pointer;
}