/* body: pagina breedte */
body {
    width: 100%; /* vol breedte */
    min-height: 100vh; /* min hoogte */
}

/* header: bovenaan */
header {
    width: 100vw; /* volle breedte */
    height: 16vh; /* hoogte header */
    background-color: #00bee4; /* blauwe achtergrond */
    color: white; /* tekst kleur */
    display: flex; /* flex layout */
    flex-direction: column; /* kolom richting */
    position: absolute; /* positie vast */
    left: 0; /* links */
    top: 0; /* boven */
}

/* header titel */
header h1 {
    text-align: center; /* gecentreerd */
    margin: -60px 0 0 0; /* omhoog schuiven */
    font-family: Arial, Helvetica, sans-serif; /* lettertype */
}

/* logo en heuvel */
#logo, #heveul {
    width: 80px; /* breedte */
    height: 80px; /* hoogte */
    background-color: white; /* wit */
    border-radius: 70%; /* rond */
}

/* heuvel positie */
#heveul {
    position: absolute; /* vast */
    right: 5%; /* rechts */
    top: 5%; /* boven */
}

/* navigatie lijst */
ul {
    background-color: rgb(3, 149, 147); /* groen blauw */
    position: absolute; /* vast */
    top: 16vh; /* onder header */
    width: 98.4%; /* bijna vol */
    height: 4%; /* hoogte */
    text-align: center; /* gecentreerd */
    margin: 0; /* geen marge */
    left: 0; /* balk links */
}

/* links */
a {
    color: white; /* wit tekst */
    text-decoration: none; /* geen underline */
    padding: 0 3%; /* ruimte */
}

/* eerste artikel */
.text {
    color: rgb(17, 17, 17); /* zwart */
    text-align: center; /* gecentreerd */
    font-family: Arial, Helvetica, sans-serif; /* lettertype */
    position: absolute; /* vast */
    top: 35%; /* van boven */
    left: 10%; /* van links */
    width: 35%; /* breedte */
    background-color: lightblue; /* blauw */
    font-size: x-large; /* grote tekst */
    overflow: auto; /* scrollbaar */
    border: 5px dotted black; /* rand */
    border-radius: 10px; /* afgerond */
    box-shadow: 30px 20px 40px black; /* schaduw */
}

/* tweede artikel */
.text2 {
    color: rgb(17, 17, 17); /* zwart */
    text-align: center; /* gecentreerd */
    font-family: Arial, Helvetica, sans-serif; /* lettertype */
    position: absolute; /* vast */
    top: 35%; /* van boven */
    right: 10%; /* van rechts */
    width: 35%; /* breedte */
    background-color: lightblue; /* blauw */
    font-size: x-large; /* grote tekst */
    overflow: auto; /* scrollbaar */
    border: 5px dotted black; /* rand */
    border-radius: 10px; /* afgerond */
    box-shadow: 30px 20px 40px black; /* schaduw */
}

/* p standaard */
p {
    display: none; /* verberg */
}

/* footer */
footer {
    position: fixed; /* vast */
    bottom: 0; /* onderaan */
    width: 100%; /* volle breedte */
}

/* foto achtergrond */
#foto {
    position: fixed; /* vast */
    z-index: -1; /* achter */
    width: 60vw; /* breedte */
    max-width: 900px; /* max breedte */
    min-width: 300px; /* min breedte */
    top: 50%; /* verticaal midden */
    left: 50%; /* horizontaal midden */
    transform: translate(-50%, -50%); /* centreren */
    border-radius: 50%; /* rond */
    opacity: 0.9; /* doorzichtig */
}