/* Import Google Fonts */
/* We'll use 'Lato' as a clean, sans-serif example.
   You can choose any sans-serif font from Google Fonts like Roboto, Open Sans, Montserrat, etc. */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* --- General Body Styles --- */
body {
    /* Background: Light grey with a slight blue tint (e.g., #E0E8F0, or hsl(210, 20%, 94%)) */
    background-color: lab(12.4% -0.96 -4.93); /* Light blue-grey */
    color: white; /* All font color is white */
    font-family: 'Lato', sans-serif; /* A clear, open-source sans-serif font */
    margin: 0; /* Remove default body margin */
    padding: 20px; /* Add some padding around the content */
    min-height: 100vh; /* Ensure body takes at least full viewport height */
    display: flex; /* Helps with centralizing content if desired */
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    justify-content: flex-start; /* Align content to the top */
}

/* --- Typography Styles --- */
h1, h2, h3, h4, h5, h6, p, span, div, a, li, input, textarea {
    color: white; /* Ensure all text elements are white */
    font-family: 'Lato', sans-serif; /* Consistent sans-serif font */
}

/* Specific adjustments for headings if needed */
h1 {
    font-size: 2.5em; /* Larger font size for main heading */
    font-weight: 700; /* Bold */
    margin-bottom: 20px;
}

p {
    font-size: 1.1em;
    line-height: 1.6; /* Better readability */
    margin-bottom: 10px;
    text-align: center;
}

/* --- Button Styles --- */
button {
    background-color: grey; /* Default button color */
    color: white; /* White text on buttons */
    border: none; /* No border for a cleaner look */
    padding: 10px 20px;
    margin: 5px;
    border-radius: 20px; /* Slightly rounded corners */
    cursor: pointer; /* Indicates it's clickable */
    font-size: 1em;
    font-family: 'Lato', sans-serif; /* Consistent font */
    transition: background-color 0.2s ease; /* Smooth transition for color changes */
}

button:hover {
    filter: brightness(1.2); /* Slightly brighten on hover */
}

button:active {
    filter: brightness(0.9); /* Slightly darken on click */
}

/* --- Anchor (Link) Styles --- */
a {
    text-decoration: none; /* Remove underline */
    color: white; /* White links */
    font-weight: bold;
    transition: color 0.2s ease;
}

a:hover {
    color: #ADD8E6; /* Light blue on hover for links */
}

.question {
    font-size: 1.5em;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.1); /* A subtle white, making it a light grey with the blue background */
    padding: 20px 30px; /* Padding inside the box */
    border-radius: 15px; /* Rounded corners */
    display: inline-block; /* Essential to make the background only span the content width */
    max-width: 80%; /* Limit width, so it doesn't just stretch across the whole screen */
    margin: 20px auto; /* Center the block horizontally and add vertical margin */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    line-height: 1.4; /* Adjust line height for better readability of larger text */

}

.focus {
    background-color: darkgreen; /* White text on buttons */
    border-radius: 10px; /* Slightly rounded corners */
    font-weight: bold;
}

.warn {
    background-color: darkred; /* White text on buttons */
    border-radius: 10px; /* Slightly rounded corners */
    font-weight: bold;
}

.button-group {
    display: flex; /* Make the container a flex container */
    flex-wrap: wrap; /* Allow items to wrap to the next line if they don't fit */
    justify-content: center; /* Center the items horizontally */
    margin: 20px 0; /* Add some vertical space above/below the groups */
    max-width: 100%; /* Ensure the button group doesn't overflow horizontally */
}

/* You might need to adjust other elements as they appear,
   but this covers the basics you mentioned.
   For example, if you have input fields, you might want to style them:
*/
input[type="text"], input[type="email"], input[type="password"], textarea {
    background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent white background */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Light border */
    color: white; /* White text input */
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'Lato', sans-serif;
    font-size: 1em;
}

input[type="text"]::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.7); /* Lighter placeholder text */
}

input[type="text"]:focus, textarea:focus {
    outline: none; /* Remove default outline */
    border-color: #ADD8E6; /* Light blue border on focus */
}