:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #101b2e; color: #e9e2ee; line-height: 1.75; } * { box-sizing: border-box; } body { margin: 0; } header, main, footer { max-width: 52rem; margin: auto; padding: 1.5rem; } header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid #ffffff22; } nav { display: flex; gap: 1rem; flex-wrap: wrap; } a { color: #eed9ba; text-underline-offset: 0.2em; } a:focus-visible { outline: 2px solid #eed9ba; outline-offset: 4px; } .brand { font: 1.8rem Georgia, serif; text-decoration: none; } h1, h2 { font-family: Georgia, serif; color: #f1e3ce; line-height: 1.2; font-weight: 400; } h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); margin: 2rem 0 1rem; } h2 { font-size: 1.65rem; margin-top: 2.5rem; } p, li { overflow-wrap: anywhere; } .notice { padding: 1.2rem; border: 1px solid #c6b0d844; border-radius: 1rem; background: #bcb0db08; } .muted, footer { color: #b4bed0; } footer { border-top: 1px solid #ffffff22; margin-top: 3rem; } ul, ol { padding-left: 1.4rem; } @media(max-width: 28rem) { header { align-items: flex-start; flex-direction: column; } }