*{box-sizing:border-box;margin:0}:root{--color-bg:hsl(0, 0%, 98%);--color-primary:hsl(0, 0%, 10%)}@media(prefers-color-scheme:dark){:root{--color-bg:hsl(0, 0%, 10%);--color-primary:hsl(0, 0%, 98%)}}body{background-color:var(--color-bg);color:var(--color-primary);width:auto;height:100dvh;display:flex;flex-direction:column;align-items:center;gap:1rem;& > .content { max-width: 900px; width: 100%; padding: 0 1rem; flex-grow: 1; }}header,footer{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;box-shadow:hsl(from var(--color-primary) h s l/.05)0 0 1rem;& > .banner { background-color: var(--color-primary); color: hsl(from var(--color-bg) h s l / .5); padding: .5rem; } & > nav { padding: .5rem; }}footer{flex-direction:column-reverse}h1,h2,h3,h4,h5,h6{padding:.35rem 0}p{padding:.25rem 0}pre{overflow-x:auto;overflow-y:scroll;min-height:30ch;height:30ch;resize:vertical;&:has(code) { background-color:hsl(from var(--color-bg) h s calc(l * 1.2)); padding:1rem; }}