#classic-car-quiz {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9; /* Default light background */
    border: 1px solid #ddd;
    border-radius: 5px;
    color: black; /* Default black text */
}

#classic-car-quiz h2 { /* Style the main quiz title */
    color: black; /* Default black text for the title */
}

#quiz-container {
    margin-bottom: 20px;
    max-height: 400px; /* Adjust as needed */
    overflow-y: auto;
    color: black; /* Default black text */
}

#quiz-results {
    max-height: 200px; /* Adjust as needed */
    overflow-y: auto;
    color: black; /* Default black text */
}

#quiz-results h3 { /* Style the results heading */
    color: black; /* Default black text for the results heading */
}

.question {
    margin-bottom: 10px;
    color: black; /* Default black text for question text */
}

/* Dark mode support using prefers-color-scheme */
@media (prefers-color-scheme: dark) {
    #classic-car-quiz {
        background-color: #333; /* Dark background for dark mode */
        color: #eee; /* Light text for dark mode */
        border-color: #555;
    }

    #classic-car-quiz h2 { /* Style the main quiz title in dark mode */
        color: #eee; /* Light text for the title in dark mode */
    }

    #quiz-container {
        color: #eee; /* Light text for dark mode */
        border-color: #555;
    }

    #quiz-results {
        color: #eee; /* Light text for dark mode */
        border-color: #555;
    }

    #quiz-results h3 { /* Style the results heading in dark mode */
        color: #eee; /* Light text for the results heading in dark mode */
    }

    .question {
        color: #eee; /* Light text for question text in dark mode */
    }
}