/** * Restart CSS v.1.2 by Simon Padbury | MIT Licence * https://github.com/SimonPadbury/restart-css/ */ /* Variables */ :root { --ff-sans: ui-sans-serif, system-ui, sans-serif; --ff-serif: ui-serif, Cambria, "Times New Roman", Times, serif; --ff-mono: ui-monospace, Menlo, Consolas, "Courier New", monospace; --ff: var(--ff-sans); --fs: 100%; --lh: calc(1em + 0.5rem); --h1: 3em; --h2: 2.25em; --h3: 1.875em; --h4: 1.5em; --h5: 1.25em; --h6: 1.125em; --line: 1px solid light-dark(#ddd, #444); --h-input: 2.5rem; --r-input: 0.25rem; --p-cell: 0.5em 1em; --bg-code: light-dark(#eee, #333); --t-input: CanvasText; --bg-input: light-dark(#f5f5f5, #252525); --t-button: white; --bg-button: light-dark(slategray, darkslategray); } /* Reset */ html { box-sizing: border-box; color-scheme: light dark; } *, *::before, *::after { box-sizing: inherit; } body { min-height: 100dvh; margin: 0; font-family: var(--ff); font-size: var(--fs); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: var(--lh); } img, picture, video, canvas, svg { max-width: 100%; display: block; } iframe { border: 0; } summary { cursor: pointer; } :target { scroll-margin-block: 5ex; } /* Accessibility */ :focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; } .visually-hidden:not(:focus):not(:active) { clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /* Typography */ h1, h2, h3, h4, h5, h6, p, ol, ul, dl, pre, table, fieldset, figure, figcaption, blockquote { margin-block: 0 1rem; line-height: var(--lh); } h1 { font-size: var(--h1); } h2 { font-size: var(--h2); } h3 { font-size: var(--h3); } h4 { font-size: var(--h4); } h5 { font-size: var(--h5); } h6 { font-size: var(--h6); } ol ol { list-style-type: lower-alpha; } ol ol ol { list-style-type: lower-roman; } li ol, li ul { margin-bottom: 0; } hr { width: 100%; border: 0; border-top: var(--line); height: 0; margin-block: var(--lh); } code, kbd, samp { font-family: var(--ff-mono); font-style: normal; font-weight: normal; } code { display: inline-block; padding-inline: .25em; color: var(--t-code); background-color: var(--bg-code); } pre { font-style: normal; font-weight: normal; white-space: pre; overflow-x: auto; } pre code { display: block; padding: 1em; overflow-x: auto; background-color: var(--bg-code); } /* Forms */ fieldset { border: var(--line); } fieldset, label, legend { font-family: var(--ff-sans); } ::placeholder { color: var(--t-input); opacity: .8; } input, select, textarea { outline: 0 none; min-height: var(--h-input); border: var(--line); border-radius: var(--r-input); padding: var(--p-cell); font-family: inherit; font-size: inherit; text-align: start; color: var(--t-input); background-color: var(--bg-input); } select:not([multiple]) { height: var(--h-input); } [type="color"] { width: var(--h-input); height: var(--h-input); padding: .25em; } [type="checkbox"], [type="radio"] { display: inline; height: 1em; min-height: unset; width: 1.05em; } [type=search] { -webkit-appearance: textfield; appearance: textfield; } :disabled:hover { cursor: not-allowed; } textarea:not([rows]) { min-height: 6em; } input:is([type="button"], [type="submit"], [type="reset"]), button, .button { display: inline-flex; height: var(--h-input); align-items: center; text-align: center; text-decoration: none; cursor: pointer; padding: var(--p-cell); border: 1px solid transparent; border-radius: var(--r-input); font-family: var(--ff-sans); font-size: inherit; line-height: 1; color: var(--t-button); background-color: var(--bg-button); } input[type="file"]::file-selector-button { border: 1px solid transparent; border-radius: var(--r-input); color: var(--t-button); background-color: var(--bg-button); } /* Table */ table { width: 100%; border-collapse: collapse; } th, td { border: var(--line); } figcaption, caption, th, td { padding: var(--p-cell); }