/* Achtergrondkleur van de hele pagina */
body {
    background-color: beige;
}

/* Opmaak van de header */
header {
    background-color: white;
    margin-bottom: 15px; /* Ruimte onder de header */
    text-align: center; /* Tekst centreren */
}

/* Opmaak van alle H1 titels */
H1 {
    text-align: center; /* Titel centreren */
    margin: 0; /* Geen extra ruimte rondom */
}

/* Element met id "kop" */
#kop {
    background: white; /* Witte achtergrond */
    color: saddlebrown; /* Bruine tekstkleur */
    text-align: center; /* Tekst centreren */
}

/* Opmaak van de footer */
footer {
    background: peru; /* Achtergrondkleur */
    color: black; /* Tekstkleur */
    clear: both; /* Zorgt dat footer onder floats komt */
    text-align: center; /* Tekst centreren */
}

/* Navigatiebalk */
nav {
    background-color: peru; /* Achtergrondkleur navigatie */
    text-align: center; /* Links centreren */
}

/* Links in de navigatie */
nav a {
    text-decoration: none; /* Geen onderstreping */
    color: white; /* Witte tekst */
    background-color: saddlebrown; /* Bruine achtergrond */
    padding: 10px; /* Binnenruimte */
    display: inline-block; /* Zorgt dat padding werkt als blok */
    text-align: center; /* Tekst centreren */
}

/* Hover-effect voor navigatielinks */
nav a:hover {
    background-color: chocolate; /* Kleur bij hover */
}

/* Container die inhoud centreert */
#container {
    width: 70%; /* Breedte van de container */
    text-align: center; /* Tekst centreren */
    margin-left: auto; /* Automatische marge links */
    margin-right: auto; /* Automatische marge rechts */
}

/* Instellingen voor iframe (bijv. YouTube video) */
iframe {
    width: 420px; /* Breedte */
    height: 315px; /* Hoogte */
    border: none; /* Geen rand */
}

/* Ongeordende lijst */
ul {
    display: inline-block; /* Zorgt dat lijst centreerbaar is */
}

/* Afbeeldingen */
img {
    height: 250px; /* Hoogte afbeelding */
    width: 400px; /* Breedte afbeelding */
    border: 1px solid #ddd; /* Lichte rand */
    border-radius: 4px; /* Afgeronde hoeken */
    padding: 5px; /* Binnenruimte */
}

/* Hover-effect voor afbeeldingen */
img:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); /* Schaduw bij hover */
}

/* Tabelopmaak */
table {
    font-family: arial, sans-serif; /* Lettertype */
    border-collapse: collapse; /* Randen samenvoegen */
    width: 100%; /* Volledige breedte */
}

/* Tabelcellen en koppen */
td,
th {
    border: 2px solid white; /* Witte rand */
    text-align: left; /* Tekst links uitlijnen */
    padding: 6px; /* Binnenruimte */
}

/* Klasse voor titels */
.titel {
    text-align: center; /* Tekst centreren */
}