/*
    Date: 13/10/2025 (DD/MM/YYYY)
    Name: Gino Xu
    The styling of the website
    have a nice day :3
*/
header{
     background-color:#BEFFBE;
    padding:1px;
    /*
        border radius zorgt dat de vierkant ronde hoeken krijgt
    */
    border-radius:5px
}
/*
    alle header css code is voor de navigatiebar
*/
header ul{
    display:flex;
    /*
        Display:flex maakt het een flexbox. Flexbox is een model waar je articelen in een rij of in kolomen kan plaatsen.
    */
    align-items:center;
}
header li{  
    justify-content:space-between;
    /*
        List-style-type geeft per item een stip, of andere. None verwijdert het stip helemaal
    */
    list-style-type:none;
    margin:auto;
 }
header a{
    color:#00A300;
    text-decoration:none;
    padding:3px;
    margin-left:25px;
    font-family:sans-serif;
}
 header a:hover{
    color:#5200A3;
    background-color:#DEBEFF;
    border-radius:3px;
}
/*
    "." naast een element in css maakt het een class
    Je kan deze code laten toepassen door "class="classnaam" in het element te typen
*/
.LeftIMG{
    float:left;
    /*
        Float zorgt dat er tekst naast de plaatje kan
    */
    margin-right:9px;
    /*
        border-radius maakt de hoeken van een plaatje rond
    */
}
img{
    border-radius:5px;
}
p{
    font-family:Oswald;
    /*
        font-family past een font toe aan het tekst
        Oswald is een font van de googlefont website
    */
    color:#FFFFFF;
    font-size:23px;
}
.centerIMG{
    float:right;
    margin-right:20px;
}
a{
    color:#c9c9c9
}
/*
    Je kan meerdere elementen toepassen in een 1 css met een ","
*/
h1, h2{
    font-family:Oswald;
    color:#FFFFFF;
}
h2{
    font-size:14px;
}
/*
    Weghalen van paarse rechthoek dat erbij zit als u op de plaatje hovert
*/
.vanish:hover{
    padding:0px;
    color:#BEFFBE;
}
.vanish{
    padding:0px;
    color:#BEFFBE;
}