:root { color-scheme: dark; font-family: system-ui, sans-serif; }
body { margin: 0; background: #2d2521; color: #fbebcf; }
main { min-height: 100svh; display: grid; align-content: space-between; }
#viewport { position: fixed; inset: 0; touch-action: none; }
#viewport canvas { display: block; width: 100%; height: 100%; }
header, section {
  position: relative; width: fit-content; max-width: calc(100vw - 4rem);
  margin: 1rem; padding: .8rem 1rem; border: 1px solid #caa877;
  background: #2e211ce8; box-shadow: 0 6px 24px #24181470;
}
h1 { font: clamp(1.5rem, 5vw, 2.8rem) Georgia, serif; margin: .2rem 0; }
p { margin: .4rem 0; }
header p:first-of-type { color: #efc590; font-size: .7rem; letter-spacing: .22em; }
section { font-size: .85rem; }
nav { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
a, button { color: inherit; }
nav a, button, #project {
  display: inline-block; padding: .35rem .65rem; background: #49342b;
  border: 1px solid #af8059; font: inherit; cursor: pointer;
}
nav a[aria-current="true"], #project { background: #84462f; }
#project { margin-top: .45rem; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #ffd891; outline-offset: 3px; }
main :is(a, button):focus { outline: 2px solid #ffd891; outline-offset: 3px; }