@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: block;
    src: url(fonts/InterVariable.fast.woff2) format('woff2');
    font-feature-settings: "cv10";
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0394, U+0398, U+0104, U+0106, U+0118, U+0141, U+0143, U+00D3, U+015A, U+0179, U+017B, U+0105, U+0107, U+0119, U+0142, U+0144, U+00F3, U+015B, U+017A, U+017C;
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: block;
    src: url(fonts/InterVariable-Italic.fast.woff2) format('woff2');
    font-feature-settings: "cv10";
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0394, U+0398, U+0104, U+0106, U+0118, U+0141, U+0143, U+00D3, U+015A, U+0179, U+017B, U+0105, U+0107, U+0119, U+0142, U+0144, U+00F3, U+015B, U+017A, U+017C;
}
/* todo: non-fast variants and generating this from the nix stuff too maybe lol */

:root {
    color-scheme: light dark;
    --color-fg: #000;
    --color-bg: #fff;
    --color-link: #7149ff;
    --color-link-visited: #8d00ed;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #1a1a1a;
        --color-fg: #fff;
        --color-link: #aaf;
        --color-link-visited: #dfa5ff;
    }
}

body {
    background-color: var(--color-bg);
    color: var(--color-fg);

    font-family: 'Inter', sans-serif;
    font-optical-sizing: auto;
    line-height: 1.5;
    font-weight: 500;

    margin: 3rem;
    margin-top: 2rem;
}

a { color: var(--color-link); }
a:visited { color: var(--color-link-visited); }

img {
    display: block;
    max-width: 100%;
}

#fops { filter: drop-shadow(0 0 5px #ccc); }
@media (prefers-color-scheme: dark) {
    #fops { filter: drop-shadow(0 0 3px #f2f2f277); }
}

time { font-feature-settings: "tnum"; }

nav #fops { display: inline; }
nav {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}
nav > ul {
    margin-block: auto;
    font-size: 1.1em;
}
/* specificity hack lol */
nav a[href] {
    color: var(--color-link);
    text-decoration: none;
}

header > * { margin-block: 0; }
header {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
h1 {
    font-size: 2.5em; /* shur up firefox */
    line-height: 1;
    margin-bottom: 0.4rem;
}

.inline-list {
    list-style-type: none;
    padding-left: 0;
}
.inline-list > * { display: inline; }
.inline-list.slashed > :not(:first-child)::before {
    content: ' / ';
    padding-inline: 0.25em;
}

.tag {
    /* intentional swap */
    --fg: var(--color-bg);
    --bg: var(--color-fg);
    background-color: var(--bg);
    color: var(--fg);
    font-size: 0.9em;
    border-radius: 0.3rem;
    padding: 0.2rem 0.4rem;
}

.tag[data-tag='test']     { --bg: #f66151; --fg: #000; }
.tag[data-tag='software'] { --bg: #8ff0a4; --fg: #000; }
.tag[data-tag='hardware'] { --bg: #dc8add; --fg: #000; }
.tag[data-tag='weather']  { --bg: #99c1f1; --fg: #000; }

pre {
    padding: 1rem;
}
pre, code {
    font-family: 'Adwaita Mono', 'Fira Code', 'JetBrains Mono', 'Lucida Console', monospace;
    font-size: 0.97em;
    line-height: 1.25;
}
:not(.sourceCode) > pre:has(code), div.sourceCode {
    border-radius: 1rem;
}