body {
  margin: 0;

  background-color: #548a8e;
	
/* De container die de 3 knoppen netjes in het midden zet */
.knoppen-balk-boven {
  display: flex;
  justify-content: center; /* Horizontaal centreren */
  align-items: center;     /* Verticaal uitlijnen op de middellijn */
  gap: 30px;              /* De witruimte tussen de 3 knoppen */
  margin-top: 3%;         /* Ruimte vanaf de bovenkant van het scherm */
 margin-bottom: 5px; /* Verlaag dit getal voor minder ruimte */
}

/* De stijl voor de 3 afbeeldingen/knoppen */
.boven {
  width: 60px;            /* Of de maat die je straks voor je knoppen wilt */
  height: auto;           /* Behoudt de verhoudingen */
  cursor: pointer;        /* Verandert de muis in een handje */
  transition: 0.2s;       /* Zorgt dat effecten soepel verlopen */
}

/* Een klein effectje als je de juiste afbeeldingen hebt */
.boven:hover {
  transform: scale(1.1);  /* De knop wordt iets groter bij aanraken */
}
	.knoppen-balk-boven {
  display: flex;
  justify-content: center;
  
}
	

 
}

.pagina-inhoud {
  display: flex;
  flex-direction: column; /* Alles onder elkaar zetten */
  align-items: center;    /* Alles horizontaal centreren */
  margin-top: 5%;         /* De 5% ruimte aan de bovenkant */
}

.hoofdfoto {
  width: 400px;           /* Jouw gekozen breedte */
  height: auto;
  margin-bottom: 30px;    /* Ruimte tussen de foto en de knoppen */
}

.knoppen-balk {
  display: flex;          /* Zet de knoppen naast elkaar */
  gap: 20px;              /* Ruimte tussen de knoppen */
  justify-content: center;
}

.menu-knop {
  width: 100px;           /* Maak de knoppen kleiner dan de foto */
  height: auto;
  transition: 0.2s;
}

.menu-knop:hover {
  opacity: 0.8;           /* Subtiel effect als je eroverheen gaat */
}



	
}
.afbeelding-container {
  display: flex;             /* Zet de items naast elkaar */
  justify-content: center;    /* Centreert de foto's horizontaal */
  gap: 20px;                 /* Maakt een mooie ruimte tussen de foto's */
  margin-top: 1%;            /* Optioneel: wat ruimte boven de set */
	 background-color: #a2c9e4; /* De kleur die je al had */
}

.afbeelding-container img {
  width: auto;                /* Zorgt dat ze samen op één regel passen */
  height: auto;              /* Behoudt de verhoudingen */
  object-fit: cover;         /* Zorgt dat ze netjes vullen zonder te vervormen */
}

img {
  width: auto;        /* Iets minder dan 50% zodat er ruimte tussen blijft */
  height: auto;      /* Zorgt dat de foto niet uitrekt (verhouding blijft goed) */
  display: inline-block;    /* Zorgt dat ze naast elkaar mogen staan */
	  width: 400px; 
}



a img {
  display: block;
  margin-top: 5%; /* 10% van de schermbreedte aan ruimte boven */
  margin-left: auto;
  margin-right: auto;
}


p {
font-family: Arial;
font-size: 16px;
color: black;
	text-align: center;
}

h1 {
font-family: Arial;
font-size: 30px;
color: red;
}

h2 {
font-family: Arial;
font-size: 24px;
color: orange;
}