/* General body styling */
body {
    font-family: Arial, sans-serif; /* Clean and readable font */
    background-color: #f9f9f9; /* Light gray background */
    text-align: center; /* Center-align content */
    padding: 20px; /* Add space around the content */
    font-size: 18px; /* Set a comfortable base font size */
    color: #333; /* Dark text for readability */
}

/* Styling for the title */
h1 {
    color: #333; /* Dark color for contrast */
    font-size: 36px; /* Larger font for emphasis */
    margin-bottom: 10px; /* Add spacing below */
}

/* Styling for the instructions */
p {
    font-size: 20px; /* Slightly larger font for better readability */
    margin-bottom: 20px; /* Add spacing below */
}

/* Styling for each question container */
div.question {
    max-width: 900px; /* Match the dropdown width */
    margin: 20px auto; /* Center align the container */
    text-align: left; /* Align text to the left for a clean look */
}

/* Styling for dropdown menus */
select {
    padding: 10px; /* Add padding for better usability */
    font-size: 18px; /* Ensure font size is large enough */
    width: 100%; /* Make the dropdown fill its parent container */
    max-width: 900px; /* Increase the maximum width for long text */
    box-sizing: border-box; /* Prevent padding from increasing the width */
    white-space: normal; /* Allow text to wrap if it’s too long */
    border: 1px solid #ccc; /* Add a subtle border for clarity */
    border-radius: 5px; /* Rounded corners for modern look */
    background-color: #fff; /* Ensure white background for visibility */
}


/* Styling for the submit button */
button {
    padding: 15px 30px; /* Add padding to make the button easy to click */
    background-color: #007BFF; /* Blue background */
    color: white; /* White text for contrast */
    border: none; /* Remove border */
    cursor: pointer; /* Add a pointer cursor on hover */
    border-radius: 5px; /* Rounded corners for a modern look */
    font-size: 20px; /* Larger font for emphasis */
    margin-top: 20px; /* Add spacing above the button */
}

/* Hover effect for buttons */
button:hover {
    background-color: #0056b3; /* Darker blue for hover effect */
}

/* Styling for the result feedback */
#result {
    font-size: 22px; /* Larger font size to emphasize the result */
    margin-top: 20px; /* Add spacing above the result */
    font-weight: bold; /* Bold text for emphasis */
    color: #333; /* Dark text for readability */
}

/* Navigation container */
.nav {
    margin-bottom: 20px; /* Space below navigation bar */
    text-align: center; /* Center-align the navigation buttons */
}

/* Navigation button styling */
.nav button {
    padding: 10px 20px; /* Add padding for clickable area */
    background-color: #4CAF50; /* Green background */
    color: white; /* White text for contrast */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor for interactivity */
    font-size: 16px; /* Readable font size */
    margin: 0 10px; /* Space between buttons */
}

/* Hover effect for navigation buttons */
.nav button:hover {
    background-color: #45a049; /* Slightly darker green on hover */
}