style.css

:root {
    /* https://tailwindcss.com/docs/customizing-colors */

    --stone-050: #fafaf9;
    --stone-100: #f5f5f4;
    --stone-200: #e7e5e4;
    --stone-300: #d6d3d1;
    --stone-400: #a8a29e;
    --stone-500: #78716c;
    --stone-600: #57534e;
    --stone-700: #44403c;
    --stone-800: #292524;
    --stone-900: #1c1917;
    --stone-950: #0c0a09;

    /* shade 500 */
    --red: #ef4444;
    --orange: #f97316;
    --amber: #f59e0b;
    --yellow: #eab308;
    --lime: #84cc16;
    --green: #22c55e;
    --emerald: #10b981;
    --teal: #14b8a6;
    --cyan: #06b6d4;
    --sky: #0ea5e9;
    --blue: #3b82f6;
    --indigo: #6366f1;
    --violet: #8b5cf6;
    --purple: #a855f7;
    --fuchsia: #d946ef;
    --pink: #ec4899;
    --rose: #f43f5e;

    --font-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', 'Cascadia Code', monospace;
}

body {
    font-family: Inter, sans-serif;
    max-width: 750px;
    margin: 0 auto;
    padding: 30px 10px;
    font-size: 1.1em;
    background-color: var(--stone-050);
    color: var(--stone-950);
}

h1,
h2,
h3 {
    font-family: var(--font-mono);
}

ul {
    padding-inline-start: 1em;

    > li {
        list-style: '- ';
        margin: 0.2em 0;
    }
}

*::selection {
    background-color: var(--indigo);
    color: var(--stone-050);
}

a.big {
    padding: 0.1em;
    font-weight: bold;
    margin: 0 0.2em;

    &:first-of-type {
        margin-left: 0;
    }
}

a {
    --color: var(--fuchsia);
    color: var(--color);

    &:hover {
        background-color: var(--color);
        color: var(--stone-050);
        outline: 2px solid var(--color);
    }

    &:focus {
        outline: 2px solid var(--color);
        text-decoration: none;
    }
}

label {
    display: block;
    padding: 0.3em 0;

    > * {
        display: block;
    }
}