/* Algemene stijlen */

body {
    font-family: 'Comic Sans MS', sans-serif; /* Gebruik een speelse, handgeschreven stijl voor de tekst */
    line-height: 1.6; /* Zorg voor voldoende ruimte tussen regels voor leesbaarheid */
    margin: 0; /* Verwijder standaard marge van de browser */
    padding: 0; /* Verwijder standaard opvulling van de browser */
    background: url('chalkboard_bg.jpg') center/cover no-repeat; /* Gebruik een schoolbordachtergrond die wordt geschaald om de hele pagina te vullen */
    color: #221c1c; /* Donkere kleur voor contrast met de achtergrond */
}

header {
    text-align: center; /* Centreer de tekst in de header */
    padding: 20px; /* Voeg ruimte toe binnen de header voor een nette opmaak */
    background: rgba(0, 0, 0, 0.477); /* Halftransparante zwarte achtergrond voor contrast */
    color: #f9e698; /* Gebruik een geelachtige kleur voor de tekst */
    border-bottom: 1px solid #f4d03f; /* Dunne gele lijn onderaan de header als accent */
}

header h1 {
    font-size: 2.5rem; /* Groot lettertype voor de hoofdtitel */
    font-weight: bold; /* Maak de tekst dikker voor nadruk */
    text-shadow: 3px 3px #000000e2; /* Voeg een schaduw toe voor een 3D-effect */
}

header p {
    font-size: 1.8rem; /* Iets kleiner lettertype voor ondertitels */
    margin-top: 2px; /* Creëer ruimte boven de paragraaf */
    font-weight: bold; /* Maak de tekst dikker voor zichtbaarheid */
    color: #f9e698; /* Gebruik dezelfde accentkleur als in de header */
}

main {
    max-width: 800px; /* Beperk de breedte van de hoofdinhoud voor betere leesbaarheid */
    margin: 10px auto; /* Centreer de hoofdinhoud horizontaal */
    padding: 10px; /* Voeg opvulling toe binnen de hoofdinhoud */
}

.note {
    background: #fef9e7cb; /* Gebruik een lichtgele achtergrond die op papier lijkt */
    padding: 20px; /* Voeg opvulling toe om de inhoud niet te laten kleven aan de randen */
    border: 3px dashed #f4d03f; /* Voeg een decoratieve, gele streepjesrand toe */
    border-radius: 8px; /* Maak de hoeken afgerond voor een zachtere uitstraling */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.534); /* Voeg een subtiele schaduw toe voor diepte */
    margin-bottom: 5px; /* Creëer ruimte tussen de secties */
}

.note h2 {
    color: #444; /* Gebruik een donkere kleur voor koppen binnen notities */
    margin-bottom: 8px; /* Creëer ruimte onder de kop voor visuele scheiding */
    margin-top: 2px; /* Creëer ruimte boven de paragraaf */
}

.underline-on-hover:hover {
    text-decoration: underline; /* Onderstreep de tekst alleen bij hover */
}

.whatsapp-link {
    width: 25px; /* Stel de grootte van het icoon in */
    height: 25px; /* Zorg voor een vierkant icoon */
    margin-right: 5px; /* Voeg ruimte toe tussen het icoon en de tekst */
    vertical-align: middle; /* Zorg ervoor dat het icoon uitlijnt met de tekst */
}



.whatsapp-link img {
    border: none;
    vertical-align: middle; /* Zet het icoon in het midden van de tekstlijn */
    line-height: 1;        /* Zorg dat de afbeelding zelf geen extra ruimte maakt */
}


ul {
    list-style: none; /* Verwijder standaard opsommingstekens */
    padding-left: 0; /* Verwijder standaard inspringing van lijsten */
    color: #222; /* Gebruik een donkere kleur voor de lijsttekst */
}

ul li {
    background: #e3f2fd; /* Lichtblauwe achtergrond voor de lijstitems */
    margin: 12px 0; /* Voeg ruimte toe tussen lijstitems */
    padding: 10px; /* Voeg opvulling toe binnen elk lijstitem */
    border-left: 9px solid #0077b6; /* Voeg een dikke blauwe lijn aan de linkerkant toe als accent */
    border-radius: 6px; /* Maak de hoeken van de lijstitems afgerond */
}

ul li::before {
    content: ""; /* Geen extra inhoud nodig vóór lijstitems */
    color: #0077b6; /* Zorg dat deze consistent is met de linkerkantlijn */
    font-weight: bold; /* Maak tekst vet indien toegepast */
    margin-right: 5px; /* Voeg ruimte toe tussen decoratief element en tekst */
}

footer {
    text-align: center; /* Centreer de tekst in de footer */
    padding: 10px; /* Voeg ruimte toe voor een nette opmaak */
    background: rgba(0, 0, 0, 0.42); /* Halftransparante zwarte achtergrond voor contrast */
    color: #ffeac3; /* Lichtgele kleur voor de tekst in de footer */
    margin-top: 20px; /* Voeg ruimte boven de footer toe */
}

.profile-container {
    display: flex; /* Gebruik flexbox om eenvoudig items te rangschikken */
    flex-direction: column; /* Stapel items verticaal */
    align-items: flex-end; /* Lijn items uit aan de rechterkant */
    margin-top: 20px; /* Voeg ruimte toe boven de container */
}

.profile-image {
    width: 200px; /* Stel een vaste breedte in voor de profielfoto */
    height: auto; /* Houd de beeldverhouding intact */
    border-radius: 15px; /* Maak de hoeken van de afbeelding afgerond */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Voeg een schaduw toe voor diepte */
}

.profile-container figcaption {
    margin-top: 10px; /* Voeg ruimte toe boven het bijschrift */
    font-weight: bold; /* Maak de tekst van het bijschrift vetgedrukt */
    text-align: right; /* Plaats het bijschrift rechts uitgelijnd */
}

/* Zorg ervoor dat de foto en contactinfo onder elkaar worden geplaatst op kleinere schermen */
@media (max-width: 768px) {
    .contact-section {
        flex-direction: column; /* Stapel de inhoud verticaal */
        align-items: center; /* Centreer de inhoud */
    }

    .contact-info, .contact-image {
        flex: none; /* Laat beide secties hun eigen ruimte bepalen */
        width: 100%; /* Laat beide secties de volledige breedte nemen */
        text-align: center; /* Centreer de tekstinhoud */
    }

    .contact-image img {
        margin: 0 auto; /* Centreer de afbeelding */
    }

}