:root {
    color-scheme: light dark;
    --text-size-sm: 0.9rem;
    --text-size-md: 1rem;
    --text-size-lg: 1.13rem;
    --text-size-xl: 1.27rem;
    --text-size-2xl: 1.42rem;
    --text-size-3xl: 1.6rem;
    --text-size-4xl: 1.9rem;
    --font-family-mono: "Nimbus Mono PS", "Courier New", monospace;

    --highlight-bg-color: rgba(0, 0, 0, 0.04);
    --bg-color: white;
    --text-color: rgba(0, 0, 0, 0.95);
    --link-color: rgb(180, 0, 0);
    --code-bg-color: #eeeeee;
    --inline-code-bg-color: #dddddd;
    --inline-code-text-color: black;
    --shadow-color: rgba(144, 144, 144, 0.87);
    --border-color: rgba(0, 0, 0, 0.2);

    --dark-highlight-bg-color: rgba(255, 255, 255, 0.05);
    --dark-bg-color: rgb(20, 20, 20);
    --dark-text-color: rgba(255, 255, 225, 0.87);
    --dark-link-color: rgba(255, 160, 80, 0.95);
    --dark-code-bg-color: #222222;
    --dark-inline-code-bg-color: #999999;
    --dark-inline-code-text-color: black;
    --dark-shadow-color: rgb(10, 10, 10);
    --dark-border-color: rgba(255, 255, 225, 0.3);
}

html {
    font-size: 1.25rem;
}

body {
    line-height: 1.3;
    background-color: light-dark(var(--bg-color), var(--dark-bg-color));
    color: light-dark(var(--text-color), var(--dark-text-color));
}

main {
    width: 100%;
    max-width: 1000px;
    margin-right: auto;
}

body,
p,
table,
td,
ul,
ol,
li,
nav {
    font-family: var(--font-family-mono);
    font-size: var(--text-size-md);
    letter-spacing: 0.01em;
}

nav > p {
    margin-block-end: 0.5rem;
    margin-block-start: 0.5rem;
    padding: 0 0.5rem;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: bold;
    line-height: 1.15;
}

h1 {
    font-size: var(--text-size-2xl);
}

h1.title {
    font-size: var(--text-size-xl);
    font-weight: normal;
    letter-spacing: 0.03em;
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0;
}

h2 {
    font-size: var(--text-size-xl);
}

h3 {
    font-size: var(--text-size-lg);
}

h4 {
    font-size: var(--text-size-md);
}

small {
    font-size: var(--text-size-sm);
}

a:link {
    text-decoration-color: light-dark(
        var(--link-color),
        var(--dark-link-color)
    );
    text-underline-offset: 0.14rem;
    color: light-dark(var(--text-color), var(--dark-text-color));
    text-decoration-style: dotted;
}

a:link:hover {
    color: light-dark(var(--link-color), var(--dark-link-color));
    text-decoration-style: solid;
}

a:visited {
    color: light-dark(var(--text-color), var(--dark-text-color));
    text-decoration-color: light-dark(
        var(--link-color),
        var(--dark-link-color)
    );
}

a:visited:hover {
    color: light-dark(var(--link-color), var(--dark-link-color));
}

code {
    font-family: var(--font-family-mono);
}

p code {
    background-color: light-dark(
        var(--inline-code-bg-color),
        var(--dark-inline-code-bg-color)
    );
    color: light-dark(
        var(--inline-code-text-color),
        var(--dark-inline-code-text-color)
    );
    white-space: nowrap;
    padding: 1px 0.4rem;
}

pre code {
    background-color: light-dark(
        var(--code-bg-color),
        var(--dark-code-bg-color)
    );
}

pre:has(code) {
    background-color: light-dark(
        var(--code-bg-color),
        var(--dark-code-bg-color)
    );
    max-width: 85vw;
    overflow-x: auto;
    padding: 1rem;
}

hr {
    margin: 2.5rem 0;
}

#topnav {
    font-size: var(--text-size-lg);
    margin-bottom: 3rem;
    justify-content: space-between;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: light-dark(
        var(--border-color),
        var(--dark-border-color)
    );

    a:link,
    a:visited {
        text-decoration: none;
    }

    a:hover,
    a:active {
        text-decoration: underline;
        text-decoration-color: light-dark(
            var(--link-color),
            var(--dark-link-color)
        );
        text-underline-offset: 0.14rem;
        color: light-dark(var(--link-color), var(--dark-link-color));
    }

    #logotext {
        display: block;
        white-space: nowrap;
        text-overflow: clip;
    }
}

#breadcrumb {
    font-size: var(--text-size-sm);
    margin-bottom: 2rem;

    a:link {
        text-decoration: none;
    }

    a:link:hover {
        text-decoration: underline;
        color: light-dark(var(--link-color), var(--dark-link-color));
        text-decoration-style: solid;
    }
}

#theme-toggle {
    font-size: var(--text-size-3xl);
    position: fixed;
    right: 1rem;
    cursor: pointer;
    opacity: 0.8;
}

#theme-toggle:hover {
    opacity: 1;
}

blockquote {
    background-color: light-dark(
        var(--highlight-bg-color),
        var(--dark-highlight-bg-color)
    );
    padding: 1rem 0.5rem 1rem 2rem;
    margin: 2rem 0 2rem 1rem;
    border-left: 2px solid light-dark(var(--link-color), var(--dark-link-color));

    p:first-child {
        margin-block-start: 0px;
    }

    p:last-child {
        margin-block-end: 0px;
    }
}

hr {
    border-color: light-dark(var(--border-color), var(--dark-border-color));
    border-width: 0 0 1px 0;
}

nav#backlinks-footer {
    border-top: 1px solid
        light-dark(var(--border-color), var(--dark-border-color));
    margin-top: 3rem;
    padding-top: 1rem;
}

nav#allarticles-footer {
    border-top: 1px solid
        light-dark(var(--border-color), var(--dark-border-color));
    margin-top: 3rem;
    padding-top: 1rem;
}

.article-preview {
    border-bottom: 1px solid
        light-dark(var(--border-color), var(--dark-border-color));
    padding-bottom: 1rem;
    padding-top: 1rem;

    a:link {
        font-size: var(--text-size-lg);
    }
}

@media screen and (max-width: 599px) {
    body {
        margin: 2rem;
    }
    #topnav {
        margin-bottom: 2rem;
    }
    #theme-toggle {
        bottom: 1rem;
    }
}

@media screen and (min-width: 600px) {
    body {
        margin: 2.5rem;
    }
    #topnav {
        margin-bottom: 3rem;
    }
    #theme-toggle {
        top: 1rem;
    }
}