html, body { 
      height: 100%; 
    }

    body {
      margin: 0;
      font-family: "Merriweather", serif;
      background-color: #f7fafc; 
      background-image: url(img/css-background.png);
      background-size: 18px 18px;
      color: #222; 
      line-height: 1.65;
    }

    h1, h2 { 
      font-family: "DM Sans", sans-serif; 
    }

    h1 { 
      color: #b3ff6a; 
      letter-spacing: .3px; 
      font-size: clamp(28px, 4.5vw, 48px); 
      margin: 24px 0 6px; 
    }

    p  { 
      color: #2a2a2a; 
      margin: 0 0 12px; 
    }

    li { 
      color: #343a40; 
    }

    .container{ 
      max-width: 1000px; 
      margin: 0 auto; 
      padding: 20px 18px 60px; 
    }

    .lead { 
      color:ghostwhite; 
      margin-bottom: 20px; 
    }

    .card { 
      background:#ffffff; 
      border:1px solid #e6eaf0; 
      border-radius: 16px; 
      box-shadow: 0 8px 24px rgba(15,23,42,.06); 
      overflow: hidden; 
    }

    .card-inner { 
      padding: 18px 18px 22px; 
    }

    .guests { 
      display: grid; 
      gap: 18px; 
      grid-template-columns: repeat(3, 1fr); 
    }

    figure { 
      margin:0; 
    }

    .avatar { 
      width: 100%; 
      height: 260px; 
      object-fit: cover; 
      display:block; 
      background:#f0f3f7; 
    }

    figcaption { 
      font-size: 12px; 
      color:#6b7280; 
      padding-top:6px; 
    }

    .menu { 
      padding-left: 20px; 
    }

    .menu li { 
      margin: 6px 0; 
    }


    form { 
      display:grid; 
      gap: 14px; 
    }

    label { 
      font-weight: 600; 
      color:#1f2937; 
    }

    input[type="text"], textarea { 
      width: 100%; 
      padding: 10px 12px; 
      border:1px solid #d1d5db; 
      border-radius: 10px; 
      font: inherit; 
    }

    textarea { 
      min-height: 100px; 
      resize: vertical; 
    }

    fieldset { 
      border: 1px solid #e5e7eb; 
      border-radius: 12px; 
      padding: 10px 12px; 
    }

    legend { 
      padding: 0 6px; 
      color:#374151; 
    }

    .radios { 
      display:flex; 
      gap: 14px; 
      align-items:center; 
      padding: 6px 2px; 
    }

    .submit { 
      background:#2b2f7b; 
      color:#fff; border:0; 
      padding: 12px 16px; 
      border-radius: 12px; 
      font-weight:700; 
      cursor:pointer; 
    }

    .submit:hover { 
      filter: brightness(1.07); 
    }
    .note { 
      font-size: 12px; 
      color:#6b7280; 
    }

    a { 
      color:#2b6cb0; 
      text-decoration: none; 
    }

    a:hover { 
      text-decoration: underline; 
    }