.body {
      font-family: 'Arial', sans-serif;
      background-color: #e0f7fa; /* Pale mint green background */
      color: #333;
      margin: 0;
      padding: 0;
      line-height: 1.6;
    }

    .container {
      max-width: 800px;
      margin: 2rem auto;
      padding: 2rem;
      background-color: #ffffff; /* White container background */
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      margin-top: 70px;
    }

    h1 {
      text-align: center;
      color: #00796b; /* Dark teal for heading */
      margin-bottom: 1.5rem;
      font-size: 2.5rem;
    }

    .question {
      margin-bottom: 1.5rem;
      padding: 1rem;
      background-color: #f1f8e9; /* Light green for questions */
      border-radius: 8px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .question:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .question p {
      font-weight: bold;
      margin-bottom: 1rem;
      color: #00796b; /* Dark teal for question text */
    }

    .options label {
      display: block;
      margin: 0.5rem 0;
      padding: 0.5rem;
      background-color: #ffffff; /* White for options */
      border-radius: 5px;
      transition: background 0.3s ease;
    }

    .options label:hover {
      background-color: #e0f2f1; /* Light mint green for hover */
    }

    .submit-btn {
      display: block;
      width: 100%;
      padding: 0.75rem;
      background-color: #00796b; /* Dark teal for button */
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .submit-btn:hover {
      background-color: #004d40; /* Darker teal for hover */
    }

    .result {
      margin-top: 2rem;
      padding: 1.5rem;
      background-color: #f1f8e9; /* Light green for result box */
      border-radius: 8px;
    }

    .result h2 {
      margin-top: 0;
      color: #00796b; /* Dark teal for result heading */
    }

    .correct-answer {
      color: #00796b; /* Dark teal for correct answers */
      font-weight: bold;
    }

    .incorrect-answer {
      color: #d32f2f; /* Red for incorrect answers */
      font-weight: bold;
    }

    .explanation {
      color: #333;
      margin-top: 0.5rem;
    }

    .solution-btn {
      margin-top: 1rem;
      padding: 0.5rem 1rem;
      background-color: #00796b; /* Dark teal for solution button */
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .solution-btn:hover {
      background-color: #004d40; /* Darker teal for hover */
    }
    
     .section-title {
      background-color: #80cbc4;
      color: #fff;
      padding: 10px 15px;
      margin: 20px 0;
      font-size: 18px;
      font-weight: bold;
      border-radius: 5px;
    }

    .solution {
      display: none;
      margin-top: 1rem;
      padding: 1rem;
      background-color: #ffffff; /* White for solution box */
      border-radius: 5px;
    }

    footer {
      text-align: center;
      padding: 1.5rem;
      background-color: #00796b; /* Dark teal for footer */
      margin-top: 2rem;
      border-radius: 10px;
      color: white;
    }

    footer p {
      margin: 0;
      color: #fff;
    }

    footer a {
      color: #80cbc4; /* Light teal for links */
      text-decoration: none;
      transition: color 0.3s ease;
    }

    footer a:hover {
      color: #b2dfdb; /* Lighter teal for hover */
    }

    @media (max-width: 768px) {
      .container {
        padding: 10rem;
        margin-top: 3rem;
        padding-top: 1.5rem;
      }

      h1 {
        font-size: 2rem;
        margin-top: 20px;
        padding-top: 20px;
      }

      .question {
        padding: 0.75rem;
      }
    }