/* ===== PAGINA ===== */
body 
{
    font-family: Arial, sans-serif; /* simpel lettertype */
    margin: 0; /* geen rand buiten */
    padding: 0; /* geen binnenruimte */
    background-color: #f5f0fa; /* licht paarse achtergrond */
    color: #333; /* donkere tekst */
}

/* ===== HEADER ===== */
header 
{
    background-color: #8e24aa; /* paarse balk */
    color: white; /* witte tekst */
    padding: 10px 0; /* ruimte boven en onder */
}

/* ===== MENU ===== */
nav ul
{
    list-style: none; /* geen bolletjes */
    display: flex; /* naast elkaar */
    justify-content: center; /* in midden */
    margin: 0;
    padding: 0;
}

nav li
{
    margin: 0 15px; /* ruimte tussen menu */
}

nav a
{
    color: white; /* witte tekst */
    text-decoration: none; /* geen streep */
    font-weight: bold; /* dik */
}

nav a:hover
{
    color: #ffd54f; /* geel bij hover */
}

/* ===== HOOFDINHOUD ===== */
main
{
    max-width: 900px; /* maximale breedte */
    margin: 20px auto; /* centreren */
    padding: 20px; /* ruimte binnen */
    background-color: #ede7f6; /* licht paars blok */
    border-radius: 10px; /* ronde hoeken */
}

/* ===== TITELS ===== */
h4
{
    text-align: center; /* midden */
    color: #cdbfd6; /* licht paars */
}

/* ===== TEKST ===== */
p
{
    margin-bottom: 15px; /* ruimte onder tekst */
}

/* ===== AFBEELDINGEN ===== */
img
{
    width: 100%; /* vult breedte */
    max-width: 500px; /* niet groter dan 500px */
    display: block; /* op nieuwe regel */
    margin: 10px auto; /* centreren + ruimte */
    border-radius: 10px; /* ronde hoeken */
}

/* ===== FOOTER ===== */
footer
{
    background-color: #6a1b9a; /* donkere paarse balk */
    color: white; /* witte tekst */
    padding: 20px; /* ruimte binnen */
    text-align: center; /* midden */
}

footer h4
{
    margin: 10px 0 5px 0; /* ruimte rond titel */
}

footer p
{
    margin: 2px 0; /* kleine ruimte */
}

/* ===== LOGO'S ===== */
#logos
{
    margin-top: 10px; /* ruimte boven */
}

#logos a
{
    margin: 0 10px; /* ruimte tussen links */
}

#logos img
{
    width: 30px; /* kleine grootte */
    height: 30px;
}

/* ===== IFRAME ===== */
iframe
{
    height: 300px; /* hoogte */
    width: 300px; /* breedte */
}