@font-face {
    font-family: 'vag_roundedregular';
    src: url('fonts/vag_rounded_regular-webfont.woff2') format('woff2'),
         url('fonts/vag_rounded_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
/* alleen voor persoonlijk gebruik!!!! alleen voor prototype dus!!! anders licensie nodig!!!!*/
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: 'vag_roundedregular', sans-serif;
    background-color: #D7E9FB; 
}

/* Container van main en footer */
.container {
    padding-left: 360px;
    padding-right: 100px; /* Witruimte van 100px aan beide kanten (navbar is 260, dus 260+100=360*/
    z-index: 2;
}


/* Container van header en navbar */
.container1 { 
    padding: 0 30px; /* padding van de container, waardoor er altijd links en rechts witruimte is van 30px */
    margin: 0 auto; /* Container wordt automatisch gecentreerd */
    overflow: auto; /* De layout wordt automatisch aangepast gebaseerd op de content */
}


/*                    */ /*                    */ /*                    */ /*                    */ /*                    */ 
/*       HEADER       */ /*       HEADER       */ /*       HEADER       */ /*       HEADER       */ /*       HEADER       */ 
/*                    */ /*                    */ /*                    */ /*                    */ /*                    */ 

.header {
    overflow: hidden; /*Alles wat uitsteekt buiten de width en height wordt verstopt*/
    background-color: white;
    min-height: 60px; 
    width: 100%;
    position: fixed; /* header scrollt niet mee, staat altijd vast */
    z-index: 2; /* header wordt naar de voorgrond getrokken */
}

.header a {
    float: left;  /* Positioneer aan de linkerkant */
    color: #4F4F64;
    padding: 17px 0; /* Padding zodat het niet tegen de rand aan staat */
    text-decoration: none; /* Zodat de lijntjes onder de links weg gaan */
    font-size: 19px; /* Grootte tekst */
    font-weight: bold; /* Tekst dik */
}

.header-rechts  a {
    float: right; /* Zodat de links aan de rechterkant staan */
    padding-left: 30px; /* Zodat de links niet tegen elkaar aan staan */
}

.header i {
    padding: 0;
}

.logo {
    height: 20px; /* Grootte logo */
}



/*                    */ /*                    */ /*                    */ /*                    */ /*                    */ 
/*       INHOUD       */ /*       INHOUD       */ /*       INHOUD       */ /*       INHOUD       */ /*       INHOUD       */ 
/*                    */ /*                    */ /*                    */ /*                    */ /*                    */ 

.hero {
    background-color: #D7E9FB; /* Achtergrondkleur lichtblauw */
    color: #333; /* Tekstkleur donkergrijs */
    text-align: center; /* Tekst gecentreerd */
    padding-top: 100px; /* Bovenste opvulling van 100px */
    margin-bottom: 20px; /* Onderste marge van 20px */
}

.zoeken-container{
    margin-bottom: 20px; /* Onderste marge van 20px */
}

.tabel-sectie {
    background-color: #fff; /* Achtergrondkleur wit */
    padding: 0 30px; /* Horizontale opvulling van 30px */
    margin: 50px auto; /* Bovenste marge van 50px en automatische horizontale marge */
    max-width: 800px; /* Maximale breedte van 800px */
    overflow-x: auto; /* Voegt horizontaal scrollen toe voor kleine schermen */
    margin-bottom: 20px; /* Onderste marge van 20px */
}

.tabel-sectie h2 {
    padding-top: 25px; /* Bovenste opvulling van 25px */
}

.tabel {
    width: 100%; /* Tabelbreedte van 100% */
    border-collapse: collapse; /* Randen van de tabelcellen samensmelten */
    border: 2px solid #ddd; /* Voegt een 2px solide grijze rand toe aan de tabel */
}

th, td {
    border: 1px solid #ddd; /* Grijze rand van 1px voor tabelcellen */
    padding: 8px; /* Opvulling van 8px voor tabelcellen */
    text-align: left; /* Tekstuitlijning links */
}

th {
    background-color: #f2f2f2; /* Achtergrondkleur lichtgrijs voor tabelkoppen */
}

/* Media query voor schermen kleiner dan 768px (tablet en mobiel) */
@media screen and (max-width: 768px) {
    .hero {
        padding-top: 70px; /* Bovenste opvulling van 70px */
    }

    .tabel-sectie {
        margin: 20px auto; /* Marge van 20px boven en onder, automatische horizontale marge */
    }
}

body {
    margin: 0; /* Geen marge voor body */
    padding: 0; /* Geen opvulling voor body */
    background-color: #D7E9FB; /* Achtergrondkleur lichtblauw */
}

.voortgang-container {
    max-width: 800px; /* Maximale breedte van 800px */
    margin: 0 auto; /* Automatische horizontale marge */
    padding: 20px; /* Opvulling van 20px */
    background-color: #fff; /* Achtergrondkleur wit */
    border-radius: 8px; /* Afgeronde hoeken van 8px */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Schaduw met spreiding van 10px en lichte zwarte kleur */
    position: relative; /* Positionering relatief */
    top: 100px; /* Verplaatsing van 100px naar beneden */
    line-height: 2; /* Regelhoogte van 2 */
}

h1 {
    text-align: center; /* Tekst gecentreerd */
    color: #333; /* Tekstkleur donkergrijs */
}

.voortgang {
    width: 100%; /* Breedte van 100% */
    background-color: #ddd; /* Achtergrondkleur lichtgrijs */
    border-radius: 4px; /* Afgeronde hoeken van 4px */
    margin-bottom: 20px; /* Onderste marge van 20px */
}

.voortgang-bar {
    height: 20px; /* Hoogte van 20px */
    background-color: #4caf50; /* Achtergrondkleur groen */
    border-radius: 4px; /* Afgeronde hoeken van 4px */
    text-align: center; /* Tekst gecentreerd */
    line-height: 20px; /* Regelhoogte van 20px */
    color: #fff; /* Tekstkleur wit */
}

.goed-beantwoord {
    color: green; /* Tekstkleur groen */
}

.gemiddeld-beantwoord {
    color: orange; /* Tekstkleur oranje */
}

.slecht-beantwoord {
    color: red; /* Tekstkleur rood */
}

/*                    */ /*                    */ /*                    */ /*                    */ /*                    */ 
/*       NAVBAR       */ /*       NAVBAR       */ /*       NAVBAR       */ /*       NAVBAR       */ /*       NAVBAR       */ 
/*                    */ /*                    */ /*                    */ /*                    */ /*                    */ 

.mobilenav {
    display: none; /* De mobiele navbar is verborgen */
}

.navbar {
    position: fixed; /* Zodat de navbar niet mee scrollt maar vast staat*/
    height: 100%; /* Hoogte over 100% van het scherm */
    width: 260px; /* 260 pixels wijd*/
    z-index: 1; /*Wordt naar de voorgrond getrokken*/
    background-color: #EEF6FD;
    overflow: hidden; /* shizzle die buiten de 280px valt is verstopt*/
}


.navbar a, .dropdown-btn {
    width: 280px; /* ook de knopjes zijn 280 px wijd */
    height: 70px; /* de knopjes zijn 70px hoog*/
    text-decoration: none; /* geen lijntjes onder tekst ofzo*/
    color: #4F4F64;
    display: block; /* zodat de knoppen netjes onder elkaar weergeven worden */
    border: none; /* Zodat de knoppen geen lijn er om heen hebben */
    background: none; /* zodat de btn geen gekke achtergrond hebben */
    text-align: left; /* Tekst begint links */
    cursor: pointer; /* Zodat de btn's ook aangeven dat ze klikbaar zijn*/
}

.navbar-list {
    padding-top: 130px; /* Zodat alleen de onderdeeltjes vd navbar lager beginnen, niet de hele navbar*/
}

.navbar img {
    padding-top: 19px; /* Zodat de iconen gecentreerd zijn */
    padding-left: 30px; /* de icoontjes staan 30px van de linkerkant af, om bij de container te passen, ze staan niet in een container omdat anders de kleur ook in een container komt*/
}

.navbar h2 {
    padding-left: 80px; /* De tekst staat 90px van de linkerkant af */
    position: relative; /* Zodat ik de relatieve positie van de h2 tekst kan aanpassen*/
    top: -45%; /* Iets omhoog */
    font-size: 21px; /* De tekst is 20 pixels groot */
    font-weight: 500; /* De tekst is niet te dik */
}

.navbar a:hover, .dropdown-btn:hover{
    background-color: #D2E2F2; /* De achtergrond van de knop veranderd bij hover */
}

.dropdown-container {
    display: none; /* De dropdown menu's zijn niet te zien zonder dat ze geopend zijn, ze openen via javascript */
    background-color: #ffffff;
}

.dropdown-container a {
    padding-left: 20px; /* in de dropdown menu's staan de knopjes iets naar links */
}

.fa-chevron-down {
    float: right; /* De pijltjes vd. dropdown menu's staan rechts*/
    padding-right: 30px; /* De pijltjes staan 28px vd rand af*/
    padding-top: 2px; /* De pijltjes staan niet te ver naar boven */
}



/*                    */ /*                    */ /*                    */ /*                    */ /*                    */ 
/*       FOOTER       */ /*       FOOTER       */ /*       FOOTER       */ /*       FOOTER       */ /*       FOOTER       */ 
/*                    */ /*                    */ /*                    */ /*                    */ /*                    */ 

.footer {
    position: relative;
    top: 200px; /* Footer tijdelijk 200px van de top af zodat ik 'm kan zien, de pagina is verder namelijk nog leeg dus anders staat die bovenin */
    width: 100%; /* Footer is 100% breed */
    min-height: 185px; /* Footer is 185px hoog, en kan hoger worden als t scherm smaller wordt */
    background-color: #4F4F64;
    color: white;

    display: flex; /* de footer is een flexbox zodat ik het goed kan verdelen in 3 kolommen*/
    justify-content: space-between; /* De content van de footer is verdeeld over de hele breedte */
    align-items: center; /* shizzle staat verticaal in het midden */
}

.footer a {
    color: white;
    text-decoration: none; /*Links zijn wit zonder lijntje eronder */
}

.cedimg {
    height: 70px; /* CED logo is 70px */
}

.footer p {
    width: 120px; /* tekst onder ced logo is niet te breed */
}

.footer li {
    text-align: center; /*lijstje met links is gecentreerd */
    margin: 20px; /* links in lijstje staan iets verder uit elkaar */
    list-style-type: none; /*geen puntjes ofzo voor de lijst items */
}

.footerrechts {
    text-align: right; /* icoontjes rechts staan naar rechts */
}

.footer i { /* social media icoontjes in de footer */
    font-size: 40px;
    padding-top: 10px;
}



/*                    */ /*                    */ /*                    */ /*                    */ /*                    */ 
/*       MOBILE       */ /*       MOBILE       */ /*       MOBILE       */ /*       MOBILE       */ /*       MOBILE       */ 
/*                    */ /*                    */ /*                    */ /*                    */ /*                    */ 


@media(max-width: 768px) {

    .container{
        padding: 10px 15px; /* De container is kleiner op mobile, anders is er wel heel weinig plek voor de content */
    }

    .header {
        height: 60px; /* Header wordt niet te hoog */
    }

    .navbar {
        display: none; /* De desktop navbar is verborgen*/
    }

    .mobilenav {
        position: fixed; /* Navbar scrollt niet mee */
        bottom: 0; /* Navbar staat onderaan */
        display: flex; /* flexbox om de kolommen in te delen */
        justify-content: space-around; /* content verspreid */
        align-items: center; /* content staat in het midden */
        background-color: #EEF6FD;
        height: auto; /* hoogte van navbar automatisch*/
        width: 100%; 
        z-index: 1; /* komt naar voren */
    }

    .mobilenav a, .dropup-btn {
        height: 70px; /* knopjes 70 pixels */
        width: 16%; /* knopjes 16% van de interface*/
        color: #4F4F64;
        padding-top: 5px; /* klein beetje padding zodat ze in t midden staan */
        position: relative; /* relatieve positie */
        text-decoration: none; /* geen lijntjes onder links*/
        border: none; /* geen zooi bij btn's */
        background: none; /* geen zooi bij btn's */
        text-align: center; /* tekst in t midden */
    }

    .dropup-btn {
        padding-bottom: 6px; /* klein beetje padding zodat de btn's in t midden staan */
    }

    .mobilenav h4 {
        font-size: 13px; 
        padding: 5px; /* witruimte tussen tekst en iconen*/
    }

    .dropup-container {
        display: none; /* niet te zien behalve als javascript wordt geactiveerd*/
        position: absolute; /* absolute positie */
        transform: translateY(100%); /* Zodat die tegen de navbar aan staat, niet er boven zweeft*/
        width: 100%; /* 100% breed */
        background-color: #ffffff;
        justify-content: space-around; /*verspreid over de breedte*/
        align-items: center; /* shizzle in t midden */
    }
}