:root {
    --primary-color: #4CAF50;
    --secondary-color: #388E3C;
    --hover-color: #2E7D32;
    --text-color: #00477a;
}

header {
    background-color: var(--primary-color);
}

nav a {
    background-color: var(--secondary-color);
}

nav a:hover {
    background-color: var(--hover-color);
}

h2, h3 {
    color: var(--text-color);
}

/* Algemene stijl voor het hele document */
body {
    font-family: Arial, sans-serif; /* Fontstijl */
    margin: 0; /* Verwijder standaard marge */
    padding: 0; /* Verwijder standaard padding */
    background-color: #2cc469;/*#a8d5ba;  Natuurlijk groene achtergrondkleur */
	line-height: 1.6; /* Beter leesbare tekst */
}

/* Stijl voor de header */
header {
    background-color: #4CAF50; /* Groene kleur voor de header */
    color: white; /* Tekstkleur in de header */
    padding: 20px; /* Padding rondom de header */
    text-align: center; /* Centreer de tekst */
}

/* Stijl voor de navigatie */
nav {
	position: fixed;
    display: center; /* Flexbox voor navigatie */
	background-color: #06933e; 
	top: 0;
    justify-content: center; /* Center de links */
    flex-wrap: wrap; /* Laat links op meerdere regels passen als dat nodig is */
	width:  100%;
}

nav a {
    color: white; /* Tekstkleur voor links */
	
    padding: 10px 15px; /* Padding rondom de links */
    text-decoration: none; /* Geen onderscheiding onder de tekst */
    border-radius: 5px; /* Maak de hoeken van de knoppen rond */
    transition: background-color 0.3s; /* Voeg animatie toe voor achtergrondkleur */
    background-color: #388E3C; /* Achtergrondkleur van de navigatielinks */
}

nav a:hover {
    background-color: #2E7D32; /* Achtergrondkleur bij hover */
}

/* Stijl voor de container */
  .container {
     max-width: 800px; /* Max breedte voor de container */
     : 100%; 
	  margin: auto; /* Centreer de container */
	  
	
	border-radius: 15px;
    padding: 20px; /* Padding rondom de container */
    background-color: white; /* Achtergrondkleur van de container */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Schaduw rondom de container */
  } 

/* Stijl voor de footer */
footer {
    text-align: center; /* Centreer de footer tekst */
    padding: 10px; /* Padding rondom de footer */
    background-color: #4CAF50; /* Groene kleur voor de footer */
    color: white; /* Tekstkleur in de footer */
    position: relative; /* Positionering voor footer */
    bottom: 0; /* Plaats de footer onderaan */
    width: 100%; /* Footer moet de volledige breedte beslaan */
}

/* Stijl voor lijsten */
ul {
    list-style-type: disc; /* Stijl voor opsommingstekens */
    padding-left: 20px; /* Padding aan de linkerkant van de lijst */
}

/* Stijl voor kopjes */
h2, h3 {
    color: #00477a; /* Kopjeskleur */
}

img {
    border-radius: 8px; /* Maak de hoeken van de afbeelding rond */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Voeg een schaduw toe aan de afbeelding */
    margin: 20px 0; /* Marges boven en onder de afbeelding */
}

@media (max-width: 600px) {
    nav a {
        padding: 8px 10px; /* Minder padding op kleine schermen */
    }

    .container {
        padding: 15px; /* Minder padding in de container */
    }
}