* {/*dit zoekt alle ellementen op de pagina's*/
margin: 0;/* verwijderd alle margin van brouwsers*/
padding: 0;/*verwijderd alle padding van brouwsers*/
box-sizing: border-box;/*de padding en margin worden meegerekend met de breedte en hoogte*/
}

body {
font-family: Arial, Helvetica, sans-serif;/*stelt een letter type in*/
line-height: 1.6;/*zorgt voor ruimte tussen de teksten en afbeeldingen*/
background-color: #f5f7f6;/*de achtergrond kleur is wit*/
color: #222;/*zwarte tekst kleur*/
}

h1 {
text-align: center;/*de teskt wordt in het midden gezet*/
margin: 2rem 1rem 1rem;/*boven 2rem rechts 1rem onder 1rem links 1rem*/
color: #2e7d32;/*groene kopjes tekst*/
}

p {
text-align: center;/*zet de tekst in het midden*/
margin: 0.5rem 1rem;/*verticale 0.5rem horizontaal 1rem*/
max-width: 900px;/*de tekst kan maximaal tot 900px om het makkelijk lees baar te maken*/
margin-left: auto;/*centreert de tekst*/
margin-right: auto;/*centreert de tekst*/
}

.Navigatie {
background-color: #2e7d32;/*achtergrond kleur is groen*/
padding: 0.75rem 1rem;/*er zit ruimte in de navigatie balk*/
display: flex;/*uitlijing in de navigatie balk*/
align-items: center;/*verticaal centeren van de itmes*/
position: sticky;/*navigatie blijft bovenaan het scherm staan*/
top: 0;/*navigatie blijft bovenaan het scherm staan*/
z-index: 1000;/*navigatie staat boven andere elementen*/
}

#NavigatieItems {
display: flex;/*items naast elkaar in een rij*/
gap: 1rem;/*horizontale afstand tussen links*/
}

.Navigatie a {
color: #ffffff;/*de tekst in de navigatie balk is wit*/
text-decoration: none;/*er is geen text decoration in de tekst van de navigatie balk*/
font-weight: bold;/*maakt de tekst vet gedrukt*/
}

.Navigatie a:hover {
text-decoration: underline;/*als je met de muis over de link gaat wordt de link ondersreept*/
}

#Hamburger {
display: none;/*standraad niet zichtbaar*/
font-size: 1.5rem;/*grootte van het hamburger icoon*/
background: none;/*geen achtergrond kleur*/
border: none;/*geen stijl*/
color: white;/*wit icoon*/
cursor: pointer;/*verandert muiscursor bij hover naar een handje*/
margin-right: 1rem;/*ruimte rechts van het icoon*/
}

section {
background: #ffffff;/*witte achtergrond*/
margin: 2rem auto;/*2rem boven en onder horizontaal centeren*/
padding: 2rem 1.5rem;/*binnenruimte boven onder 2rem links rechts 1.5rem*/
max-width: 1000px;/*het kan maximaal 1000px worden*/
border-radius: 16px;/*de hoeken worden mooier en beter*/
box-shadow: 0 6px 20px rgba(0,0,0,0.08);/*schaduw voor 3D effect*/
}

section h1 {
margin-top: 0;/*Verwijdert extra marge boven kop in sectie*/
}

img {
display: block;/*afbeelding wordt block element*/
width: 100%;/*afbeelding schaalt mee tot max 500px*/
max-width: 500px;/*afbeelding schaalt mee tot max 500px*/
height: 300px;/*behoudt verhoudingen*/
margin: 2rem auto;/*center horizontaal, verticale marge 2rem*/
border-radius: 16px;/*de hoeken worden mooier en beter*/
object-fit: cover;/*snijdt afbeelding bij als nodig om te passen*/
box-shadow: 0 4px 10px rgba(0,0,0,0.15);/*lichte schaduw voor diepte*/
}

footer, p:last-child {
font-size: 0.9rem;/*iets kleinere tekst*/
color: #555;/*donkergrijs voor minder nadruk*/
}

@media (max-width: 1024px) {
img {
max-width: 400px;/*afbeeldingen niet groter dan 400px op schermen kleiner dan 1024px*/
height: auto;/*afbeeldingen niet groter dan 400px op schermen kleiner dan 1024px*/
}
}

@media (max-width: 768px) {
#Hamburger {
display: block;/*toon hamburger menu*/
}

#NavigatieItems {
display: none;/*verberg navigatie links standaard*/
flex-direction: column;/*links onder elkaar in kolom bij open menu*/
width: 100%;/*links onder elkaar in kolom bij open menu.*/
margin-top: 1rem;/*er zit margin boven in de navigatie items*/
}

.Navigatie.show #NavigatieItems {
display: flex;/*als .Navigatie de class show heeft laat de links zien*/
}

#NavigatieItems a {
padding: 0.5rem 0;/*meer ruimte tussen links in mobiel menu*/
}

img {
max-width: 90%;/*afbeeldingen iets kleiner voor mobiele schermen*/
height: auto;/*de hooght blijf normale hoogte*/
}
}