body{
display:flex; /* flex layout */
flex-direction:column; /* verticaal */
min-height:100vh; /* hele hoogte */
font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif; /* lettertype */
}

header{
position:absolute; /* vrije plek */
top:0; /* boven */
width:100%; /* volle breedte */
height:16%; /* balk hoogte */
background-color:#00bee4; /* blauwe kleur */
color:white; /* tekst wit */
}

header h1{
color:white; /* tekst wit */
text-align:center; /* midden tekst */
margin:0; /* geen marge */
margin-top:-60px; /* omhoog */
font-family:Arial,Helvetica,sans-serif; /* ander font */
}

#naam{
position:absolute; /* vrije plek */
z-index:9; /* boven lagen */
left:40%; /* naar midden */
top:12%; /* iets omlaag */
color:white; /* tekst wit */
font-size:x-large; /* grote tekst */
}

#logo{
width:80px; /* logo breedte */
height:80px; /* logo hoogte */
background-color:white; /* witte achtergrond */
border-radius:70%; /* rond logo */
}

main{
background-image:url(../images/station.png); /* achtergrond foto */
position:absolute; /* vrije plek */
width:100%; /* volle breedte */
top:100px; /* onder header */
height:90%; /* grote hoogte */
background-size:cover; /* foto vullen */
z-index:-2; /* achter alles */
}

ul{
display:flex; /* naast elkaar */
list-style:none; /* geen bolletjes */
}

li a{
text-decoration:none; /* geen lijn */
font-size:large; /* grotere tekst */
color:whitesmoke; /* lichte tekst */
}

#consumptie{
background-color:rgb(255,149,0); /* oranje vak */
position:absolute; /* vrije plek */
width:18%; /* vak breed */
height:22%; /* vak hoog */
left:8%; /* links plek */
top:50%; /* midden hoogte */
}

#must{
background-color:rgb(255,0,0); /* rood vak */
position:absolute; /* vrije plek */
width:18%; /* vak breed */
height:22%; /* vak hoog */
left:30%; /* midden links */
top:50%; /* midden hoogte */
}

#sport{
background-color:rgb(0,255,0); /* groen vak */
position:absolute; /* vrije plek */
width:18%; /* vak breed */
height:22%; /* vak hoog */
left:50%; /* midden */
top:50%; /* midden hoogte */
}

#ictm{
background-color:rgb(0,0,255); /* blauw vak */
position:absolute; /* vrije plek */
width:18%; /* vak breed */
height:22%; /* vak hoog */
left:71%; /* rechts plek */
top:50%; /* midden hoogte */
}

article{
position:absolute; /* vrije plek */
text-align:center; /* midden tekst */
width:60%; /* tekst breed */
top:120%; /* lager */
left:20%; /* midden */
margin-top:-15%; /* omhoog */
background-color:white; /* wit vak */
border:5px solid black; /* zwarte rand */
box-shadow:30px 20px 40px black; /* schaduw */
}

footer{
position:fixed; /* blijft staan */
bottom:0; /* onderkant */
width:100%; /* volle breedte */
height:50px; /* balk hoogte */
}

iframe{
position:absolute; /* vrije plek */
width:40%; /* kaart breed */
height:40%; /* kaart hoog */
border-radius:100%; /* ronde kaart */
top:125%; /* lager */
left:50%; /* midden */
transform:translate(-50%,-50%); /* echt midden */
}

button{
position:absolute; /* vrije plek */
bottom:0; /* onder */
right:0; /* rechts */
background:none; /* geen kleur */
font-size:large; /* grote tekst */
}
/* p standaard */
p {
    display: none; /* verberg */
}