body {
    padding: 0px;
    margin: 0;
    box-sizing: border-box;
    background-color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
}
.knop,
a.knop {
  background-color: #0087D3;
  border: 2px solid #03498F;
  border-radius: 1rem;
  padding: 1rem;
  color: #FFFFFF;
  display: inline-block; /* zorgt voor voorspelbare afmetingen */
  font: inherit;          /* zelfde lettertype als buttons */
  line-height: normal;    /* voorkomt hogere link-text */
  text-decoration: none;  /* verwijdert onderstreping van <a> */
  box-sizing: border-box; /* zorgt dat border en padding meetellen */
  cursor: pointer;        /* maakt de link als knop */
  vertical-align: middle; /* uitlijnen met knoppen */
}

.knop:hover,
a.knop:hover {
  background-color: #03498F;
  border: solid #0087D3;
  color: #FFFFFF;
}
header {
    border-bottom: solid #03498F;
    width: 100%;
    height: 10rem;
    display: flex;
    align-items: center;      /* verticaal centreren */
    justify-content: center;  /* horizontaal centreren */
    position: relative;       /* nodig voor absolute positionering van het logo */
}
header img {
    height: auto;
    width: 30vw;
    padding-left: 10px;
    position: absolute;       /* zet het logo vast links */
    left: 10px;
}
header h1 {
    position: absolute;
    right: 10rem;
    padding: 0;
    text-align: center;
}
header #uitloggen {
    position: absolute;
    right: 10px;
    top: 10px;
}
main {
    width: 100%;
    height: auto;
}
footer {
    position: absolute;
    width: 100%;
    bottom: 0px;
}
footer #final {
    background-color: #FFFFFF;
    width: 100%;
    height: 2rem;
    position: relative;
    bottom: 0px;
    margin: 0px;
    align-content: center;
    text-align: center;
    border-top: solid #03498F;
}

#gridLinks {
    background-color: #03498F;
    width: 100%;
    height: 100%;
}

#gridRechts {
    background-color: #0087D3;
    width: 100%;
    height: 100%;
}