/* 1. Algemene opmaak voor de hele pagina (body) */
body 
{
    background-color: #f0f4f8; /* Zachte achtergrondkleur */
    font-family: sans-serif;    /* Standaard leesbaar lettertype */
    color: #333333;             /* Donkere tekstkleur voor goed contrast */
    margin: 0;                  /* Haalt de standaard randen rondom de pagina weg */
    padding: 0;
}

/* 2. De hoofdkop bovenaan de pagina (header) */
header 
{
    background-color: #0055a5;  /* Mooie blauwe huisstijlkleur */
    color: white;               /* Witte tekst */
    text-align: center;         /* Tekst netjes in het midden */
    padding: 20px;              /* Ruimte rondom de titel */
}

/* 3. De lijst binnen het navigatiemenu (nav) */
nav ul 
{
    margin: 0;
    padding: 0;
    list-style: none;           /* Haalt de standaard opsommingstekens (bolletjes) weg */
    background-color: #003d73;  /* Donkerblauwe balk achter de knoppen */
    display: flex;              /* Zet de knoppen dankzij Flexbox netjes naast elkaar */
    justify-content: center;    /* Centreert het menu in het midden van het scherm */
    flex-wrap: wrap;            /* Zorgt dat knoppen naar de volgende regel gaan op kleine schermen */
}

/* 4. De losse links/knoppen in het menu */
nav a 
{
    display: block;
    color: white;               /* Witte tekst op de knoppen */
    text-decoration: none;      /* Haalt de lelijke onderstreping van links weg */
    padding: 15px 20px;         /* Maakt de klikbare vlakken lekker groot */
    font-weight: bold;          /* Maakt de tekst dikgedrukt */
}

/* 5. Wat er gebeurt als je met je muis op een menuknop staat (hover) */
nav a:hover 
{
    background-color: #0055a5;  /* Verandert de achtergrondkleur bij aanwijzen */
}

/* 6. Het witte hoofdvak waarin de tekst en inhoud staat (main) */
main 
{
    max-width: 800px;           /* Zorgt dat de tekst niet te breed wordt op grote schermen */
    margin: 30px auto;          /* Zet het vlak keurig in het midden van de pagina */
    background-color: white;    /* Witte achtergrond voor de leesbaarheid */
    padding: 30px;              /* Binnenruimte zodat de tekst niet tegen de rand plakt */
    border-radius: 8px;         /* Maakt de hoeken van het vlak mooi afgerond */
}

/* 7. De gekleurde tekstvakken op de pagina (section) */
#section1 
{
    background-color: #eef6fc;  /* Heel lichtblauw vlakje als accent */
    border-left: 5px solid #0055a5; /* Dikkere blauwe lijn aan de linkerkant */
    padding: 20px;              /* Binnenruimte voor de tekst */
    border-radius: 4px;         /* Licht afgeronde hoekjes */
}

/* 8. Het vak waar de Google Maps kaart in zit */
.map-container 
{
    margin-top: 15px;           /* Ruimte boven de kaart */
    border-radius: 4px;         /* Afgeronde hoeken voor de kaart */
    overflow: hidden;           /* Zorgt dat de kaart netjes binnen de hoeken blijft */
}

/* 9. De voettekst onderaan de pagina (footer) */
footer 
{
    text-align: center;         /* Tekst gecentreerd */
    padding: 20px;
    color: #666666;             /* Grijze, subtiele tekstkleur */
    font-size: 0.9em;           /* Net iets kleiner lettertype */
}

/* 10. Responsive instelling voor smartphones en kleine schermen (Media Query) */
@media (max-width: 600px) 
{
    nav ul 
{
        flex-direction: column; /* Zet de menuknoppen onder elkaar in plaats van naast elkaar op telefoons */
        text-align: center;
    }
}