@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'Lora';
    src: url('/fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype'),
         url('/fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito';
    src: url('/fonts/Nunito-VariableFont_wght.ttf') format('truetype'),
         url('/fonts/Nunito-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

body {
	font-family: Nunito, sans-serif;
	font-size: clamp(1.4rem, 1.6vw, 3rem); /*Responsive fontgrootte */
  background-image: url('images/background.jpg'); /* Pad naar de afbeelding */
    background-size: cover; /* Zorgt ervoor dat de afbeelding de volledige achtergrond dekt */
    background-position: center; /* Centraal positioneren van de afbeelding */
    background-repeat: no-repeat; /* Voorkom herhaling van de afbeelding */
}

 html {
      font-size: 10px;/*Basis lettergrootte voor de hele body */
}
/* Basis stijl voor de container en kolommen */
.container {
    display: flex;
    flex-wrap: wrap; /* Zorgt ervoor dat kolommen naar de volgende regel springen */
    margin: 0 -10px; /* Voor ruimte tussen de kolommen */
}

.column {
     /*background-color: #f0f0f0; Achtergrondkleur van de kolommen */
    padding: 20px; /* Ruimte binnen de kolommen */
    box-sizing: border-box; /* Zorgt ervoor dat padding en grens meegerekend worden in de breedte */
    flex: 1 0 33.3%; /* Standaard breedte van 33.3% voor elk van de 6 kolommen */
	
    text-align: center; /* Centreert de tekst in de kolommen */
    max-width: 33.3%; /* Maximale breedte van de kolom in % */
}

.column h1 {
    margin: 0 0 10px; /* Verklein de marge rond de h1 */
	font-family: Lora, serif;
    font-size: 1.7em; /* Grootte van de titel */
}
.column h2 {
    margin: 0 0 10px; /* Verklein de marge rond de h1 */
    font-size: 1.6em; /* Grootte van de titel */
}.column h3 {
    margin: 0 0 10px; /* Verklein de marge rond de h1 */
	font-family: Lora, serif;
    font-size: 1.2em; /* Grootte van de titel */
}
.column p {
    margin-bottom: 10px; /* Marges onder elke paragraaf */
    line-height: 1.5; /* Regelafstand voor betere leesbaarheid */
	text-align: justify;
  text-justify: inter-word;
}

.column img {
    max-width: 100%; /* Zorgt ervoor dat afbeeldingen niet buiten de kolom vallen */
    height: auto; /* Houdt de verhoudingen van de afbeelding */
    margin-bottom: 10px; /* Ruimte tussen de afbeeldingen */
	border-radius:8px;
}
.column figure {
    margin: 0; /* Verwijdert standaard marges van figure */
}

.column figcaption {
    margin-top: -5px; /* Pas dit aan voor de gewenste afstand */
    font-size: 0.9em; /* Maakt de tekst iets kleiner */
    color: #555; /* Optionele kleur voor de caption */
    text-align: center; /* Centreert de caption onder de afbeelding */
}
/* Responsive regels */
@media (max-width: 800px) {
    .column {
        flex: 1 0 50%; /* Op schermen tot 800px worden kolommen 50% breed */
        max-width: 50%; /* Maximale breedte voor twee kolommen in % */
    }
}

@media (max-width: 360px) {
    .column {
        flex: 1 0 100%; /* Op schermen tot 360px zijn kolommen 100% breed */
        max-width: 100%; /* Geen beperking op max-width voor één kolom */
    }
}