:root { color-scheme: light dark; } /* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */ *, *::before, *::after { box-sizing: border-box; /* 1. Use a more-intuitive box-sizing model */ } *:not(dialog) { margin: 0; /* 2. Remove default margin */ } @media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; /* 3. Enable keyword animations */ } } body { line-height: 1.5; /* 4. Increase line-height */ -webkit-font-smoothing: antialiased; /* 5. Improve text rendering */ } img, picture, video, canvas, svg { display: block; /* 6. Improve media defaults */ max-width: 100%; /* 6. Improve media defaults */ height: auto; /* 6. Improve media defaults */ } input, button, textarea, select { font: inherit; /* 7. Inherit fonts for form controls */ } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; /* 8. Avoid text overflows */ } p { text-wrap: pretty; /* 9. Improve line wrapping */ } h1, h2, h3, h4, h5, h6 { text-wrap: balance; /* 9. Improve line wrapping */ } #root, #__next { isolation: isolate; /* 10. Create a root stacking context */ }