/* Theme Defaults */ :root { /* Sizing */ --base-font-size: clamp(1.6rem, 2vw, 1.9rem); --small-font-size: clamp(1.2rem, 1.5vw, 1.4rem); --spacing-unit: var(--base-font-size); /* Typography */ --main-font-family: "IBM Plex Sans", system-ui, sans-serif; --head-font-family: var(--main-font-family); --code-font-family: "IBM Plex Mono", Monaco, Consolas, "DejaVu Sans Mono", ui-monospace, monospace; /* Backgrounds */ --background-body: rgb(255, 255, 255); --background-header: rgb(1, 157, 224); --background-footer: rgb(255, 241, 6); /* Colors */ --color-text: rgb(1, 0, 0); --color-shadows: rgba(1, 0, 0, 0.25); --color-details: rgb(149, 149, 153); --color-accent: rgb(1, 157, 224); --color-accent-alt: rgb(255, 0, 24); /* Defaults */ --border: 0.1rem solid var(--color-details); --radius: 0.5rem; --shadow: 0 0 0.5rem var(--color-details); } @media screen and (prefers-color-scheme: dark) { :root { /* Backgrounds */ --background-body: rgb(0, 0, 13); --background-header: rgb(216, 35, 42); --background-footer: rgb(199, 214, 51); /* Colors */ --color-text: rgb(255, 255, 255); --color-shadows: rgba(255, 255, 255, 0.25); --color-details: rgb(234, 238, 241); --color-accent: rgb(255, 241, 6); --color-accent-alt: rgb(235, 140, 45); } } /* Basic resets */ html { box-sizing: border-box; font-family: var(--main-font-family); font-size: 62.5%; } *, *::before, *::after { box-sizing: inherit; } html, body, p, ul, ol, dl, table, pre, blockquote, iframe, audio, video, figure, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }