body {
    font-family: 'Segoe UI Historic', 'Noto Sans Egyptian Hieroglyphs', 'Noto Sans Cuneiform', Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
    display: flex; /* Nodig om main-content-container te kunnen centreren als je dat wilt */
    justify-content: center; /* Centreert de main-content-container horizontaal */
}

.main-content-container {
    display: flex;
    flex-direction: row; /* Quiz en legenda naast elkaar */
    width: 95%;          /* Gebruik bijna de volledige breedte */
    max-width: 1400px;   /* Een maximale breedte voor hele grote schermen */
}

.quiz-container {
    flex: 2; /* Quiz-blok neemt meer ruimte (bijv. 2/3) */
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    margin-right: 20px; /* Ruimte tussen quiz en legenda */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centreer inhoud van quiz-container horizontaal */
}

.legenda-container {
    flex: 1; /* Legenda-blok neemt minder ruimte (bijv. 1/3) */
    padding: 15px;
    background-color: #e9e9e9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    height: fit-content; /* Zorgt dat de hoogte past bij de inhoud */
}

.legenda-container h2 {
    margin-top: 0;
    text-align: center;
}

.legenda-sectie {
    margin-bottom: 15px;
    text-align: left; 
}

.legenda-sectie h3 {
    font-size: 1.1em;
    margin-bottom: 8px;
}

.legenda-sectie ul {
    list-style-type: none;
    padding-left: 0;
}

.legenda-sectie li {
    margin-bottom: 6px; 
    line-height: 1.7; 
}

.legenda-sectie code { 
    background-color: #dcdcdc; 
    padding: 3px 6px; 
    border-radius: 3px;
    font-size: 1.4em; /* Duidelijke tekens in legenda */
    color: #333; 
}

.legenda-sectie small {
    font-size: 0.8em;
    color: #555;
}

#vraag-presentatie {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 6px;
    width: 90%; /* Maak het vraagblok iets smaller dan de quiz-container */
    text-align: center;
    min-height: 80px; /* Zorg voor een minimale hoogte */
    display: flex;
    justify-content: center;
    align-items: center;
}

#vraag-tekst {
    font-size: 3em;  /* !! VEEL GROTERE TEKST VOOR DE SOM !! */
    font-weight: bold;
    color: #343a40;
}

#antwoord-input {
    padding: 10px;
    margin-top: 10px; /* Wat ruimte boven input */
    margin-right: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1.1em;
    width: 60%; /* Maak input veld breder */
    max-width: 250px; /* Maar niet te breed */
    text-align: center;
}

button {
    padding: 10px 18px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
    font-size: 1em;
}

button:hover {
    background-color: #0056b3;
}

#feedback-tekst {
    margin-top: 15px;
    font-weight: bold;
    min-height: 22px; 
    font-size: 1.1em;
}

.goed {
    color: green;
}

.fout {
    color: red;
}