*{box-sizing:border-box;margin:0;padding:0}

body{
  min-height:100svh;display:grid;place-items:center;
  padding:5.5rem 2rem 3rem;
  background:#14181f;color:#f2efe9;
  font-family:"Archivo",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* menu */
.menu{
  position:fixed;top:1.6rem;left:0;right:0;
  display:flex;justify-content:center;gap:1.6rem;
  font-size:.85rem;
}
.menu a{
  color:#8d95a3;text-decoration:none;
  transition:color .9s ease;
}
.menu a:hover{color:#f2efe9}
.menu a[aria-current="page"]{color:#f2efe9}

/* links */
ul{list-style:none;display:grid;gap:clamp(.7rem,2.4vh,1.3rem)}
ul a{
  display:block;color:inherit;text-decoration:none;
  font-weight:600;font-variation-settings:"wdth" 116;
  font-size:clamp(1.8rem,7vw,3rem);
  letter-spacing:-.025em;line-height:1;
  transition:color .9s ease;
}
ul a:hover,ul a.active{color:#e9a13b}
ul a:focus-visible{outline:none;text-decoration:underline;text-underline-offset:8px}

/* over mij */
.page{width:min(560px,100%)}
h1{
  font-weight:600;font-variation-settings:"wdth" 116;
  font-size:clamp(1.8rem,7vw,3rem);
  letter-spacing:-.025em;line-height:1;
  margin-bottom:1.6rem;
}
.page p{
  font-size:1.05rem;line-height:1.65;max-width:60ch;
}
.page p + p{margin-top:1rem}

@media (prefers-reduced-motion:reduce){
  ul a,.menu a{transition:none}
}