@font-face {
  font-family: 'Prompt';
  src: url('../fonts/Prompt-Bold.ttf') format('truetype');
  font-style: normal;
}

 :root {
      --bg-color: #1e1e1e;
      --card-bg: #ffffff;
      --yes-color: #28a745;
      --no-color: #dc3545;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  font-family: 'Prompt';
    }

    body {
      min-height: 100vh;
      background-color: var(--bg-color);
      display: flex;
          flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .age-wrapper {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5vw;
    }

    .age-card {
      background: var(--card-bg);
      width: 90%;
      max-width: 28rem;
      padding: 3rem 2rem;
      text-align: center;
      border-radius: 1rem;
    }

    .age-card h1 {
      font-size: 1.6rem;
      margin-bottom: 1rem;
    }

    .age-card p {
      font-size: 1rem;
      margin-bottom: 2rem;
    }

    .btn-group {
      display: flex;
      gap: 1.5rem;
      justify-content: center;
    }

    .age-btn {
      width: 45%;
      padding: 0.9em;
      font-size: 1rem;
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
    }

    .yes-btn {
      background: var(--yes-color);
      color: #fff;
    }

    .no-btn {
      background: var(--no-color);
      color: #fff;
    }

    /* HIDDEN EXTRA CONTENT */
    .hidden-content {
      display: none;
    }