/*ALGEMEEN*/
    /*Dit haalt alle margins overal op de website weg, zodat we die handmatig kunnen maken als we dat willen.*/
    * {
        margin: 0px;
    }

    /*Achtergrondkleur van de site.*/
    body {
        background-color: #35363a;
    }

    /*Stelt de wrapper, een div waar alles op de website in zit, in op 100%.*/
    #wrapper {
        width: 100%;
        margin-top: 8vw;
}

/*ALLES IN DE HEADER*/
    /*Maakt een header met achtergrondkleur, volledige breedte, en een deel van de hoogte.*/
    header {
        float: left;
        background-color: #212121;
        width: 100vw;
        height: 8vw;
        position: fixed; /*maakt header vast als je scrollt*/
        top: 0;
        z-index: 100;
    }

    /*Het logo krijgt dezelfde breedte als de sidebar.*/
    #logo {
        float: left;
        width: 8vw;
    }
    #logo_img {
        float: left;
        width: 8vw;
    }


    #rest_van_header {
        float: left;
        line-height: 1; /*zorgt voor niet te veel ruimte boven h1*/
        width: 92%; /*100% van het beeld - de 8% van de sidebar.*/
        height: 100%; /*is 100% van de hele header, oftewel dezelfde hoogte als de header.*/
        text-align: center; /*de titeltekst wordt gecentreerd.*/
        border-bottom: 0.2vw solid #505050; /*een kleine border om de header en sidebar van de rest van de pagina te scheiden.*/
}

/*ALLE TITELTEKSTELEMENTEN*/
    h1 {
        margin-top: 1.1vw; /*beetje ruimte boven de h1*/
        color: white; /*tekstkleur wit*/
        font-family: 'Roboto Mono', sans-serif; /*lettertype, geïmporteerd uit Google Fonts.*/
        font-size: 3.5vw; /*tekstgrootte*/
    }

    h2 {
        color: white; /*tekstkleur wit*/
        font-family: 'Courier New'; /*lettertype*/
        line-height: 1.5; /*zorgt voor ruimte tussen h1 en h2*/
        font-size: 2vw; /*tekstgrootte*/
        font-weight: normal; /*zorgt ervoor dat de h2, normaal dikgedrukt, dat niet is*/
    }

    h3 {
        text-align: center; /*align de header in het midden*/
        color: #dddddd; /*tekstkleur, voor niet te veel contrast met de donkergrijze tinten*/
        font-family: 'Trebuchet MS'; /*lettertype*/
    }

    h4 {
        font-size: 25px; /*tekstgrootte*/
        font-family: Share Tech Mono; /*lettertype, geïmporteerd uit Google Fonts*/
    }

    h5 {
        color: black; /*tekstkleur voor de projectbuttons*/
    }

/*ALLES VOOR DE SIDEBAR*/
    #sidebar {
        float: left;
        background-color: #212121; /*achtergrondkleur sidebar*/
        width: 8vw; /*breedte*/
        height: 92vh; /*100 - 8 van logo*/
        border-right: 0.2vw solid #505050; /*een kleine border om de header en sidebar van de rest van de pagina te scheiden.*/
        position: fixed; /*zorgt ervoor dat de sidebar op een vaste plaats blijft als je scrollt*/
    }

    button {
        float: left;
        background-color: #999999; /*kleur buttons*/
        margin: 10vh 0% 0% 12.5%; /*spacet de buttons goed in de sidebar*/
        height: 6vh; /*hoogte en breedte*/
        width: 75%;
        border: 0.2vw solid #777777; /*rand van button*/
        font-family: 'Courier New', Courier, monospace; /*lettertype, met monospace als reserve*/
        font-weight: bold; /*maakt de tekst dikgedrukt, om het leesbaarder te maken*/
        font-size: 0.9vw; /*tekstgrootte*/
    }

    button:hover { /*maakt de button nét wat lichter als je eroverheen gaat met je muis*/
        background-color: #AAAAAA;
    }

/*REST VAN PAGINA*/
    /*Geeft de grootte en plek van de rest van de pagina.*/
    #rest_van_pagina {
        margin-left: 8%;
        margin-bottom: 5%;
        width: 92%;
        height: 92vh;
    }

    article {
        float: left;
        background-color: #585858; /*achtergrondkleur tekstvakken*/
        border: 0.15vw solid black;
        width: 40vw; /*grootte en breedte van het homepagearticle*/
        height: 55%;
        margin: 5% 0% 0% 4%; /*spacet de articles ten opzicht van elkaar en de rest van de pagina*/
    }

    /*Afsluiterdiv die zorgt dat scrollen net iets makkelijker is: vooral de margin-top is belangrijk*/
    #afsluiter {
        float: left;
        height: 2%;
        width: 100%;
        margin-top: 5%;
    }

    /*Voor pagina's met maar één article is dit de standaard.*/
    #LANarticle {
        text-align: center;
        width: 90%;
        height: auto;
        color: #eee;
        font-family: 'Trebuchet MS', sans-serif;
    }


/*ALLES VOOR PROJECTPAGINAS*/
    /*Voor de links naar de subprojectpagina's de grootte en rand.*/
    .project {
        float: left;
        width: 15vw;
        margin: 1vw;
        border: 2px solid #505050;
        height: 10vw;
    }

    btn {
        display: block; /*zorgt dat de button überhaupt displayt*/
        margin: 0.5vw; /*zorgt voor kleine ruimte*/
        padding: 5px;
        background-color: #dddddd;
        border-radius: 5px; /*zorgt voor ronde hoekjes*/
        width: 15vw;
        font-size: 15px;
        text-align: center; /*zorgt voor centraal uitgelijnde tekst*/
    }

    btn:hover { /*maakt als je over de knopjes heen gaat de kleur iets lichter*/
        background-color: #efefef; 
    }



    #projectarticle { /*geeft de grootte aan van de projectarticles, eigenlijk gewoon een lijst met buttons*/
        width: 17vw;
        height: auto;
        margin-right: 4%;
        align-items: center; /*lijnt de tekst uit*/
    }

    #projectimg { /*geeft de grootte en rand aan van de afbeelding die op elke subprojectpagina staat*/
        float: left;
        height: 50vh;
        margin: 5%;
        border: 0.5vh solid #505050;
    }



/*LANPARTY/CONTACT*/
    /*Een hele kleine div, net als afsluiter, om wat ruimte te creëren.*/
    #tussenfotos {
        float: left;
        width: 100%;
        margin-top: 0.5%;
    }


    /*Zorgt voor wat ruimte van de rand van tekst bij articles.*/
    #art_text {
        margin: 0px 50px 0px 50px;
        font-size: 22px;
    }

    /*Is voor de afbeeldingen bij de LANparty- en contactpagina. Zo kunnen er twee naast elkaar staan.*/
    .art_img {
        float: left;
        width: 49.5%;
        border: 2px solid #333333;
    }


    /*Linkopmaak voor de contactpagina*/
    a {
        text-decoration: none;
        color: white;
        font-weight: bold;
    }

    a:hover {
        color: gray;
    }


    /*Opmaak voor de twee soorten lijsten op de contact/LANpartypagina.*/
    ul {
        list-style-type: none;
        font-size: 23px;
    }

    dt {
        font-family: "Courier New", Courier, monospace;
        font-weight: bold;
        font-size: 25px; /*De termen ietsjes groter, voor een header-paragraaf-effect*/
    }

/*FOTOPAGINA*/
    /*Geeft de fotos op de fotopagina wat afstand tot elkaar, en geeft ze een rand.*/
    .foto {
        float: left;
        margin: 5% 0 0 4%; /*top right bottom left*/
        width: 40vw;
        border: 2px solid #aaa;
    }