* {
  padding: 0;
  margin: 0;
  font-family: "Playfair Display", serif;
  color: var(--kleur6);
  box-sizing: border-box;
}
*::before, *::after {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
:root {
  --kleur1: #B7C4CF;
  --kleur2: #EEE3CB;
  --kleur3: #D7C0AE;
  --kleur4: #967E76;
  --kleur5: #FFFFFF;
  --kleur6: #000000;
}

body {
  margin: 0;
  padding: 10px 50px;
  background-color: var(--kleur2);

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  row-gap: 20px;

  min-height: 100dvh;
  overflow: hidden;
}

header {
  position: relative;
}
header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--kleur1);
  border-radius: 5px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  font-size: x-large;
}
ul li a {
  display: block;
  color: var(--kleur6);
  padding: 14px 16px;
  text-decoration: none;
}
ul li a.active {
  text-underline-position: under;
  text-decoration: overline underline;
}

footer {
  position: relative;
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--kleur1);
  border-radius: 5px;
}