/* Achtergrondkleur van de volledige 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;              /* Komt onder zwevende elementen */
    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;        /* Gedraagt zich 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;        /* Automatisch links centreren */
    margin-right: auto;       /* Automatisch rechts centreren */
}

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

}

/* Hover-effect voor afbeeldingen */
img:hover {
       box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1)  /* Schaduw bij hover */
}	

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

/* Secties met extra ruimte en onderlijn */
.section {
    margin-bottom: 60px;              /* Ruimte onder elke sectie */
    border-bottom: 2px solid #b87333; /* Bruine lijn onder sectie */
}