/* --- Algemene instellingen voor de hele pagina --- */
body {
    margin: 0; /* Verwijdert standaardmarge van het browservenster */
    font-family: Arial, sans-serif; /* Standaard lettertype voor de hele site */
}

/* --- Header --- */
header {
    background-color: lightblue; /* Lichtblauwe achtergrond voor header */
    padding: 20px;               /* Ruimte binnen de header rondom de inhoud */
    text-align: center;          /* Centreert de inhoud horizontaal */
}

/* --- Hoofdinhoud --- */
main {
    padding: 20px; /* Ruimte rondom de hoofdinhoud */
}

/* --- Footer --- */
footer {
    background-color: lightgray; /* Grijze achtergrond voor footer */
    padding: 10px;               /* Ruimte binnen de footer */
    text-align: center;          /* Centreert de tekst in de footer */
}

/* --- Logo styling --- */
.logo {
    position: absolute; /* Plaatst logo bovenop de normale flow, kan boven de sidebar header "zweven" */
    top: 20px;          /* 20px vanaf de bovenkant */
    left: 20px;         /* 20px vanaf de linkerkant */
    font-size: 28px;    /* Grote tekst voor logo */
    font-weight: bold;  /* Vetgedrukt */
    background: linear-gradient(135deg, #001aff, #cc08e6); /* Gradient achtergrond */
    color: white;       /* Tekstkleur wit */
    padding: 10px 25px; /* Ruimte binnen het logo */
    border-radius: 30px; /* Afgeronde hoeken */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Schaduw voor diepte */
    text-decoration: none; /* Geen onderstreping van de link */
    transition: transform 0.2s, box-shadow 0.2s; /* Smooth animatie bij hover */
}

/* Hover-effect voor logo */
.logo:hover {
    transform: translateY(-3px); /* Logo beweegt licht omhoog */
    box-shadow: 0 6px 15px rgba(0,0,0,0.4); /* Schaduw wordt groter */
}

/* --- Navigatiebalk --- */
nav {
    background-color: #2c3e50; /* Donkerblauwe achtergrond voor nav */
    padding: 15px;             /* Ruimte rondom de links */
}

/* Alle links in de nav */
nav a {
    color: white;         /* Tekstkleur wit */
    text-decoration: none; /* Geen onderstreping */
    margin-right: 20px;    /* Ruimte tussen de links */
    font-weight: bold;     /* Vetgedrukt */
}

/* Sidebar styling */
.container {
    display: flex; /* Flexbox layout: sidebar + content naast elkaar */
    min-height: calc(100vh - 80px); /* Min hoogte van het scherm minus header/footer */
}

.sidebar {
    width: 16.666%; /* Sidebar neemt 1/6 van de breedte */
    background-color: #34495e; /* Donkergrijze achtergrond */
    padding: 20px;             /* Binnenruimte */
    box-sizing: border-box;    /* Padding telt mee in breedte */
}

/* Links in de sidebar */
.sidebar nav a {
    display: block;          /* Elke link op een eigen regel */
    color: white;            /* Tekst wit */
    text-decoration: none;   /* Geen onderstreping */
    margin-bottom: 15px;     /* Ruimte onder elke link */
    font-weight: bold;       /* Vetgedrukt */
}

/* Hover-effect voor sidebar links */
.sidebar nav a:hover {
    color: orange; /* Kleur verandert naar oranje bij hover */
}

/* --- Hoofd content secties --- */
.intro {
    background-color: #f2f2f2; /* Lichtgrijze achtergrond voor content */
    padding: 20px;             /* Binnenruimte */
    border-radius: 10px;       /* Afgeronde hoeken */
    margin-bottom: 20px;       /* Ruimte onder sectie */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtiele schaduw */
}

.intro h2 {
    color: #2c3e50; /* Donkerblauwe kleur voor titels */
    margin-top: 0;   /* Verwijdert extra marge boven de titel */
}

.intro p {
    font-size: 16px;   /* Gemakkelijk leesbare tekstgrootte */
    line-height: 1.5;  /* Lijnhoogte voor betere leesbaarheid */
    color: #333;       /* Donkergrijze tekstkleur */
}

/* --- Afbeeldingen in de intro sectie --- */
.intro img {
    display: block;        /* Zorgt dat afbeelding op een eigen regel staat */
    margin: 20px auto;     /* Ruimte boven en onder, en centreren */
    width: 300px;          /* Gemiddelde grootte */
    height: auto;          /* Behoudt verhoudingen */
    border-radius: 10px;   /* Afgeronde hoeken voor een mooie uitstraling */
}