/* General Reset */
body {
    font-family: 'Arial', sans-serif;
    background-color: #86e5fd;
    margin: 0;
    padding: 0;
}

/* Container Styling */
.container {
    width: 50%; /* Full width */
    margin: 0px auto;
    background-color: #fcfcfc;
    padding: 40px;
    padding-bottom: 3vh;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin-top: -15px;
    text-align: center;
    box-sizing: border-box; /* Ensure padding doesn't push out the width */
}

/* Heading Styling */
h1 {
    font-size: 40px;
    color: #00ccff;
    margin: 10px 0;
}

p{
    font-size: 19px;
}

.quiz-image {
    display: block;
    margin: 20px auto; /* centers the image and adds some vertical spacing */
    width: 30vw;
    height: 40vh;
  }

/* Progress Bar Styling */
.progress-bar {
    width: 100%;
    background-color: #ddd;
    border-radius: 5px;
    margin-bottom: 20px;
    overflow: hidden;
}

.progress {
    height: 8px;
    width: 0%;
    background-color: #e71972;
    transition: width 0.4s ease;
}

/* Question Styling */
.question {
    margin: 20px 0;
    text-align: left;
}

h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #00ccff;
}

label {
    display: block;
    margin: 10px 0;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

label:hover {
    background-color: #e8e8e8;
}

input[type="radio"] {
    margin-right: 10px;
}

/* Button Styling */
button {
    width: 100%;
    padding: 15px;
    background: linear-gradient(140deg, #0085cc, #08a2e4);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    margin-top: 0px;
}

button:hover {
    background: linear-gradient(135deg, #a4e8ff, #90d8f4);
    transform: translateY(-2px);
}

/* Fade-in Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


#result-container {
    margin-top: 20px;
    padding: 10px;
    border-radius: 10px;
    background-color: #f8f9fa;
    text-align: center;
    display: none; /* Hidden until results are shown */
}

#result-image {
    width: 35vw;
    margin-top: 15px;
    border-radius: 10px;
}

#result-text {
    font-size: 1.1rem;
    line-height: 1.7;
}

.quiz-article {
    background-color: #f9f9f9; /* Light background for contrast */
    border: 1px solid #ddd; /* Subtle border for structure */
    border-radius: 8px; /* Rounded corners for a modern look */
    padding-top: 10px; /* Space inside the box */
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 20px;
    margin: 20px auto; /* Space around the box */
    max-width: 45%; /* Limit width for better readability */
    font-family: 'Arial', sans-serif; /* Consistent font */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.quiz-article h2 {
    color: #0067b1; /* Darker text for headings */
    font-size: 1.8rem; /* Larger heading size */
    margin-bottom: 10px; /* Space under the heading */
    text-align: center; /* Center the main heading */
}

.quiz-article h3 {
    color: #0093dc; /* Slightly lighter for subheadings */
    font-size: 2rem; /* Smaller than h2 */
    margin-top: 20px; /* Space above subheadings */
    margin-bottom: 10px;
    text-align: center;
}

.quiz-article p {
    color: #000000; /* Neutral text color */
    font-size: 17px; /* Standard paragraph size */
    line-height: 1.8; /* Improve readability */
    margin-bottom: 15px; /* Space between paragraphs */
}

.quiz-article ul {
    padding-left: 20px; /* Indent the list */
    margin-bottom: 15px;
}

.quiz-article ul li {
    color: #444; /* Slightly darker list text */
    font-size: 1rem; /* Match paragraph text size */
    margin-bottom: 8px; /* Space between list items */
}

.quiz-article strong {
    color: #0073e6; /* Highlight strong text */
}

.quiz-article a {
    color: #0073e6; /* Links consistent with strong text */
    text-decoration: none; /* Remove underline */
}

.quiz-article a:hover {
    text-decoration: underline; /* Add underline on hover */
}

/* Mobile Styles (up to 768px) */
@media (max-width: 1024px) {
    .container {
        width: 100vw;
        padding: 5vh 20px;
        padding-top: 4vh;
        margin-left: 0;
        margin-right: 0;
        align-items: center;
    }

    h1 {
        font-size: 33px;
        text-align: center; /* Center h1 */
    }

    .quiz-image {
        display: block;
        margin: 20px auto; /* centers the image and adds some vertical spacing */
        width: 100vw;
        height: 40vh;
      }

    h2 {
        font-size: 22px;
        margin-top: 0px;
        text-align: center; /* Center h2 */
        margin-left: -20px;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    button {
        width: 90%;
        margin-top: -20px;
        margin-bottom: -10px;
        margin-left: auto; /* Center the button horizontally */
        margin-right: auto; /* Center the button horizontally */
        display: block;
        font-size: 20px;
        padding: 15px;
    }

    .question {
        width: 100%;
        padding: 10px;
    }

    label {
        max-width: 85vw; /* Set max width for labels */
        font-size: 19px;
        margin-top: 0px;
        margin-bottom: 20px;
        line-height: 1.4;
    }

    p {
        line-height: 1.4;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 1.3rem;
    }

    #result {
        margin-top: 30px;
        color: #000000;
        opacity: 0;
        transition: opacity 0.6s ease;
        width: 82vw;
        max-width: 95vw;
        line-height: 1.6;
        padding-bottom: 3vh;
    }

    /* Quiz Article Styling */
    .quiz-article {
        background-color: #f9f9f9; /* Light background for contrast */
        border: 1px solid #ddd; /* Subtle border for structure */
        border-radius: 8px; /* Rounded corners for a modern look */
        padding: 20px; /* Uniform padding for smaller screens */
        padding-left: 20px;
        padding-bottom: 20px;
        margin: 10px auto; /* Reduce margin for better spacing */
        margin-top: 20px;
        margin-bottom: 3vh;
        max-width: 90%; /* Utilize more screen width */
        font-family: 'Arial', sans-serif; /* Consistent font */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    }

    .quiz-article h2 {
        color: #0067b1; /* Darker text for headings */
        font-size: 29px; /* Slightly smaller heading size */
        margin-bottom: -10px; /* Space under the heading */
        text-align: center; /* Center the main heading */
        padding-left: 20px;
    }

    .quiz-article h3 {
        color: #0093dc; /* Slightly lighter for subheadings */
        font-size: 1.7rem; /* Smaller than h2 */
        margin-top: 15px; /* Reduce space above subheadings */
        margin-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
        line-height: 1.4;
    }

    .quiz-article p {
        color: #000000; /* Neutral text color */
        font-size: 21px; /* Slightly smaller paragraph size */
        line-height: 1.6; /* Improve readability on smaller screens */
        margin-bottom: 10px; /* Reduce space between paragraphs */
    }

    .quiz-article ul {
        padding-left: 15px; /* Indent the list slightly */
        margin-bottom: 10px;
    }

    .quiz-article ul li {
        color: #444; /* Slightly darker list text */
        font-size: 1rem; /* Match paragraph text size */
        margin-bottom: 8px; /* Space between list items */
    }

    .quiz-article strong {
        color: #0073e6; /* Highlight strong text */
    }

    .quiz-article a {
        color: #0073e6; /* Links consistent with strong text */
        text-decoration: none; /* Remove underline */
    }

    .quiz-article a:hover {
        text-decoration: underline; /* Add underline on hover */
    }
}