:root{--background:hsl(0deg 0% 75%);--foreground:hsl(0deg 0% 25%);--navMenuBackground:hsl(180deg 20% 80%);--navMenuColor:hsl(180deg 80% 20%);--navMenuHighlight:hsl(180deg 20% 40%)}@media (prefers-color-scheme:dark){:root{--background:hsl(0deg 0% 25%);--foreground:hsl(0deg 0% 75%);--navMenuBackground:hsl(180deg 80% 20%);--navMenuColor:hsl(180deg 20% 80%);--navMenuHighlight:hsl(180deg 80% 0%)}html{color-scheme:dark}}*{box-sizing:border-box;padding:0;margin:0}body,html{max-width:100svw}body{color:var(--foreground);background:var(--background);font-family:Arial,Helvetica,sans-serif;display:grid;grid-template-rows:min-content min-content 1fr min-content;grid-gap:0;gap:0;height:100svh}footer,header,main,nav{justify-self:center;width:clamp(600px,85%,1200px)}footer,header{background-color:var(--foreground);color:var(--background);text-align:center;padding:.5em}nav{background-color:var(--navMenuBackground);color:var(--navMenuColor);padding:.5em;display:flex;gap:1em;justify-content:flex-start;align-items:center}nav a{padding:.25em}nav a.active{color:var(--navMenuColor);font-weight:700;background-color:var(--navMenuHighlight,hsl(0deg 0% 50%))}main{padding:1em 2em}main :is(h1,h2,h3,h4,h5,p){padding:.5em}main :is(h1,h2,h3,h4,h5){text-align:center}a{color:inherit;text-decoration:none}@media (max-width:600px){footer,header,main,nav{width:100%}}