body {
    background-color: #FFD700; /* Middenstuk: GEEL */
    color: black;              /* Tekst op geel moet zwart zijn voor contrast */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    overflow: hidden; 
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- DE BOVENBALK (ROOD) --- */
header {
    background-color: #D40000; /* Rood */
    color: white;              /* Witte tekst */
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 15vh;              /* Iets hoger gemaakt voor de grote tekst */
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* De titel in het midden */
#titel {
    font-size: 3.5em;          /* Veel groter */
    font-weight: 900;          /* Extra dikgedrukt */
    text-transform: uppercase;
    text-align: center;
    flex-grow: 1;              /* Neemt alle ruimte in het midden */
    text-shadow: 2px 2px 0px #000; /* Klein schaduwrandje voor leesbaarheid */
}

/* De klok rechts */
#klok {
    font-size: 4em;            /* Was 2.5em -> Nu veel groter! */
    font-weight: bold;
    width: 280px;              /* Iets breder gemaakt zodat de tekst past */
    text-align: right;
    line-height: 1;            /* Zorgt dat hij verticaal mooi uitlijnt */
}

/* Onzichtbaar vlakje links (moet even breed zijn als de klok) */
.spacer {
    width: 280px;              /* Ook aangepast voor de balans */
}

/* --- HET MIDDENSTUK (GEEL) --- */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* "Volgende sjtop:" tekst */
#volgende-tekst {
    font-size: 4em;            /* Flink groter */
    font-weight: bold;
    color: #D40000;            /* Rood gemaakt, staat mooi op geel */
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* De naam van de halte zelf */
#huidige-halte {
    font-size: 11em;           /* GIGANTISCH */
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
    /* Zwarte tekst met een wit randje eromheen voor extra 'pop' */
    color: black;
    text-shadow: 
        3px 3px 0px white,
        -1px -1px 0 white,  
        1px -1px 0 white,
        -1px 1px 0 white,
        1px 1px 0 white;
}

/* --- DE ONDERBALK (GROEN) --- */
footer {
    background-color: #009933; /* Groen */
    color: white;              /* Witte tekst */
    height: 8vh;
    display: flex;
    align-items: center;
    justify-content: center;   /* Footer tekst ook gecentreerd */
    font-size: 1.8em;          /* Ook wat groter */
    font-weight: bold;
    text-transform: uppercase;
}