body { /*selecteert alles in de body*/
    font-family: 'Montserrat'; /*dit is de lettertype die overall wordt gebruikt op de paginas*/
    margin: 0; /*de margin en padding heb ik naar 0 gezet zodat alles mooi aan de zijkanten kan zitten*/
    padding: 0; 
    background-color: #ffffff; /* de achtergrond kleur van de website*/
}

header { /*selecteert alles in de header*/
    background-color: #b8a47f; /*de kleur van de header*/
    color: white; /*de tekst kleur in de header*/
    padding: 0.25em; /*de padding van de header*/
}

h1{ /*selecteert alle h1*/
    text-align: center; /*dit zorgt ervoor dat de tekst "scouting azoelen" mooi in het midden komt te staan van de pagina*/
}

header p{ /*dit selecteert alle p in de header*/
    text-align: center; /* dit zorgt ervoor dat de tekst "Waar het avontuur begint" in het midden komt van de pagina*/
}


.img_left{ /*dit is de class van de afbeelding die aan de linker kant staat in de header*/
    z-index: 5; /* dit zorgt ervoor dat de afbeelding voor de header kan staan*/
    height: 5.5em; /*dit is de hoogte van de afbeelding*/
    left: 100%; /*dit zorgt ervoor dat de afbeelding helemaal links komt te staan*/
    margin-top: -10em; /*dt zorgt ervoor dat de afbeelding niet onder de header komt maar op*/
}

.img_right{ /*dit is de class van de afbeelding die aan de rechter kant staat in de header*/
    z-index: 5; /* dit zorgt ervoor dat de afbeelding voor de header kan staan*/
    height: 5.5em; /*dit is de hoogte van de afbeelding*/
    margin-left: 90%; /*dit zorgt ervoor dat de afbeelding aan de rechter kan komt te staan (ik weet niet goed waarom rigt: 100% niet werkt*/
    margin-top: -10em; /*dt zorgt ervoor dat de afbeelding niet onder de header komt maar op*/
}

nav { /*dit selecteert de menu*/
    display: flex; /*hier door kan ik het menu vrij bewegen*/
    justify-content: center; /*hier door komt het menu in het midden te staan*/
    background-color: #f5deb3; /*de achtegrond kleur van het menu*/
    padding: 0.25em; /*de padding zorgt ervoor dat de knoppen op het menu iets extra ruimte hebben*/
    border-bottom: solid 0.5em; /*dit zorgt ervoor dat er een lijn/border aan de onderkant komt*/
    border-color: #05b32b; /*dit is de kleur van de lijn/border*/

}

nav a { /*dit selecteert de knoppen in het menu*/
    color: #898989; /*dit is de tekst kleur van de knoppen in het menu*/
    text-decoration: none; /*dit zorgt er voor dat de tekst niet meer onderlijnt is*/
    padding: 1em; /*dit zorgt ervoor dat de knoppen wat groter zijn*/
    margin: 0 0.2em; /*dit zorgt ervoor dat er een extra randje buiten de knoppen zit*/
    transition: background-color 0.5s ease; /*dit is de transition van de knop en zorgt ervoor dat de kleur niet meteen verandert als je met je muis er over heen gaat*/
    border-radius: 5px; /*dit zorgt ervoor dat de knoppen een afronding hebben aan de hoeken*/
}

nav a:hover{ /*dit is wat er gebeurt als je met je muis over de knoppen hovert*/
    background-color: #d4b781; /*dit is de achtergrond kleur van de knop als je er overheen hovert*/
    box-shadow: 0 0 5px 2.5px #ad9361 /*dit geeft een verwazing aan de zijkanten van de knop als je erover heen hovert*/
}


section { /*dit selecteert alles in de section*/
    padding: 2em; /*dit zorgt er voor dat niet alles precies aan de zijkanten van de website zit*/
}

footer { /*dit selecteert alles in de footer*/
    background-color: #237830; /*achtergond kleur van de footer*/
    color: white; /*de tekst kleur van de footer*/
    text-align: center; /*zorgt dat de tekst in de footer in het midden komt*/
    padding: 0.1em; /*zorgt dat de zijkanten niet te dicht op de tekst is*/
    position: fixed; /*zorgt ervoor dat die samen met de pagina mee scrolt*/
    bottom: 0; /*dit geeft aan dat de footer aan de bodem fast moet blijven*/
    width: 100%; /*zorgt ervoor dat de footer helemaal van links naar rechts gaat zonder white-space achter te laten*/
}

h2,h3{ /*selecteert alle h2 en h3 */
    color: #31a529; /*verandert de tekst kleur naar een groen*/
}

.Paragraaf{ /*selecteert alle tag met de class .paragraaf*/
    color: black; /*verandert de tekst kleur naar zwart*/
}

li{ /*selecteert list*/
    font-size: 1em; /*verander de tekst groote naar 0.75em*/
}

.gridcontainer{ /*dit is de class waar ik de griditem class heb ingezet zodat ik ze naast elkaar kon zetten*/
    display: grid; /*dit zorgt ervoor dat het een grid layout krijgt*/
    grid-template-columns: 75% 25%; 
    /*dit zorgt ervoor dat het linker gedeelte (de tekst) 75% van de pagina en het rechter gedeelte (de afbeeldingen) 25%*/
}

.griditem img{ /*dit selecteer alle afbeeldingen in de class griditem*/
    width: 10em; /*zet de breedte naar 10em*/
    padding-left: 40%; /*zorgt dat er 40% ruimte is aan de linkerkant*/
    margin-top: 95px; /*zorgt ervoor dat de afbeeldingen 95px uit elkaar staan*/
}

th{ /*selecteer alle th*/
    background-color: #14d94b; /*verandert de achtergond kleur naar een groen*/
    width: 125px; /*zet de breedte naar 125px*/
}

table,th,td{ /*selecteer alle table, th en td*/
    border: 2px solid #0f5e1b; /*zet een border van 2 px in een groene kleur*/
    border-collapse: collapse; /*zorgt ervoor dat er geen ruimte zit tussen 2 borders*/
    text-align: left; /*zorgt dat de tekst aan de linker kant komt te staan*/
    padding: 2px; /*geeft een padding en vergroot de binnenruimte met 2px aan elke kant*/
    font-size: 0.9em; /*verandert de tekst groote naar 0.9em*/
}

td{ /*selecteert alle td's*/
    background-color: #e6e4dc; /*verandert de achtergrond kleur naar een wit*/
}


.gallerij{ /*selecteert alle classes met de naam .gallerij*/
    width: 400px; /*zet de breedte van alle foto's naar 400px*/
}

.gallerij1{ /*selecteert de breede foto*/
    height: 150px; /*verandert de hoogte naar 150 px*/
}

.video{ /*selecteer alle classes met de naam .video*/
    width: 800px; /*zet de breedte naar 800px*/
    height: 450px; /*zet de hoogte naar 450px*/
}

.contact_tekst,.grijs{ /*selecteert alle classes met de naam .contact_tekst*/
    color: #868786; /*verandert de tekst kleur naar een grijs*/
    font-size: 15px; /*verandert de tekst groote naar 15 px*/
}

.emails{ /*selecteert alle classes met de naam .emails*/
    text-decoration: none; /*zorgt dat de tekst niet meer onderstreept is*/
    color: #1ebd48; /*verandert de kleur naar een groen*/
}
h3,h4,.extra_info{ /*selecteert alle h3 en h4*/
    color: #3c3eb5; /*verandert de tekst kleur naar een blauw*/
}