/* opsomming */
ul {
    /* Dit haalt de stipjes (bullet points) of nummers voor de lijstitems weg */
  list-style-type: none;
  /*margin haalt de buitenruimte (witruimte) rondom de hele lijst weg.*/
  margin: 0;
  /*padding haalt de binnenruimte (inkeping) aan de linkerkant weg.*/
  padding: 0;
  /* Dit zorgt ervoor dat elementen binnen de lijst netjes binnen de balk blijven en lost een CSS-technisch probleem op (clearfix). */
  overflow: hidden;
  /* Dit geeft de hele menubalk een kleur */
  background-color: #333333;
}

ul li {
    /* Het haalt een element uit de normale verticale volgorde en duwt het zo ver mogelijk naar de linkerkant van zijn container. */
  float: left;
}
/* # roep je een ID op */
#Home
{
    background-color: aqua;
}
#Sport
{
    background-color: red;
}
#Tourist
{
    background-color: yellow;
}
#Vacatures
{
    background-color: blue;
}
#Contact
{
    background-color: orange;
}

ul li a {
  display: block;
  /* Wat het doet: Het verandert de link van een inline-element in een block-element. */
  color: white;
  /* Wat het doet: Het maakt de tekstkleur van de link wit. */
  text-align: center;
  /* Wat het doet: Het centreert de tekst in het midden van het zojuist gemaakte blok. */
  padding: 14px 16px;
  /* Wat het doet: Het geeft de link binnenruimte (14 pixels aan de boven- en onderkant, 16 pixels aan de linker- en rechterkant). */
  text-decoration: none;
  /* Wat het doet: Het haalt de streep onder de link weg. */
}
/* als je over de element gaat met je muis dat heet hover en bij deze veranderd de kleur van het element als er overheen hovert */
ul li a:hover {
  background-color: #111111;
  color: black;
}

body
{
    /* dit is de achergrondkleur van de pagina  */
    background-color: beige;  
    font-family: Roboto, Verdana;

}
img
{
    /* met de width kan je de formaat van het plaatje bepalen met px en of met procenten  */
    width: 500px;
}
header {
    /* hier mee kan je wat op de header zit centreren d.m.v text-align en dan center te selecteren  */
    text-align: center;
}

header img {
    width: 500px; /* pas grootte aan als je wilt */

    

}
a
{
    /* Wat het doet: Dit stelt de vaste hoogte van de link in op precies 10 pixels. */
    height: 10px;
    /* • Wat het doet: Dit geeft de link een flexibele binnenruimte van 5% aan de linker- en rechterkant. */
    padding-left: 5%;
    padding-right: 5%;
}
/* dit is de afbeelding van het nieuws  */
img
{
    /* met de width kan je de formaat van het plaatje bepalen met px en of met procenten  */
    width: 2000px;
    /* met een # voor de naam wilt zeggen dat ik een id heb gegeven in de html pagina */
    /* met een # roep je de ID op */
} 
#straat 
{
    /* met de width kan je de formaat van het plaatje bepalen met px en of met procenten  */
    width: 300px;
}
#sociaal
{
    /* met de width kan je de formaat van het plaatje bepalen met px en of met procenten  */
    width: 300px;
}
#werkzaamheden
{
    /* met de width kan je de formaat van het plaatje bepalen met px en of met procenten  */
    width: 300px;
}
#plaatjes
{
    display: flex;
    justify-content: space-evenly;
    align-content: center;
    align-items: center;
}
#muur
{
     display: flex;
     justify-content: space-evenly;
    align-content: center;
    align-items: center;
}


body {
    margin: 0;
}

/* /* Veranderd de achtergrond kleur, kleur van de teksten en met de padding zet je de content weg van de rand */
footer {
    background-color: rgb(255, 154, 2);
    color: rgb(0, 0, 0);
    padding: 5vh;
}
/* hier roep de groep id op die je de naam heb gegeven van je class*/
.socials  
{
  width: 100px; 
  height: 100px;
}
ul
{
    display: flex;
}
li
{
    width: 15vw;
    list-style: none;
}

main {
    margin-left: 50px;
}
#activiteiten
{
    width: 100vw;
}