:root {
    color-scheme: light;

    --modus-font-sans: sans-serif;
    --modus-font-mono: monospace;

    --modus-heading-1: var(--modus-blue);
    --modus-heading-2: var(--modus-cyan);
    --modus-heading-3: var(--modus-magenta);
    --modus-fg-link: var(--modus-blue-warmer);
    --modus-fg-link-symbolic: var(--modus-cyan);

    /* Light theme */
    --modus-bg-main: #ffffff;
    --modus-bg-dim: #f2f2f2;
    --modus-fg-main: #000000;
    --modus-fg-dim: #595959;

    --modus-fg-button-inactive: #595959;
    --modus-bg-button-inactive: #f2f2f2;
    --modus-fg-button-active: #000000;
    --modus-bg-button-active: #c4c4c4;

    --modus-border: #9f9f9f;

    --modus-red: #a60000;
    --modus-blue: #0031a9;
    --modus-blue-warmer: #3548cf;
    --modus-cyan: #005e8b;
    --modus-magenta: #721045;

    --modus-prose-code: #00663f;
    --modus-comment: #595959;
    --modus-fnname: #721045;
    --modus-variable-name: #005e8b;
    --modus-type: #005f5f;
    --modus-keyword: #531ab6;
    --modus-string: #3548cf;
    --modus-constant: #0000b0;
    --modus-builtin: #8f0075;
    --modus-org-block-bg: #ecedff;
    --modus-bg-hl-line: #dae5ec;
    --modus-fg-line-number-inactive: #595959;
}

/* Dark theme */
[data-theme="dark"] {
    color-scheme: dark;

    --modus-bg-main: #2a2a2a;
    --modus-bg-dim: #383838;
    --modus-fg-main: #f5f5f5;
    --modus-fg-dim: #d0d0d0;

    --modus-fg-button-inactive: #d0d0d0;
    --modus-bg-button-inactive: #383838;
    --modus-fg-button-active: #f5f5f5;
    --modus-bg-button-active: #555555;

    --modus-border: #666666;

    --modus-red: #ff5f59;
    --modus-blue: #7bb3ff;
    --modus-blue-warmer: #9bc5ff;
    --modus-cyan: #00d3d0;
    --modus-magenta: #feacd0;

    --modus-prose-code: #6ae4b9;
    --modus-comment: #ef8386;
    --modus-fnname: #f78fe7;
    --modus-variable-name: #4ae2f0;
    --modus-type: #11c777;
    --modus-keyword: #79a8ff;
    --modus-string: #2fafff;
    --modus-constant: #b6a0ff;
    --modus-builtin: #feacd0;
    --modus-org-block-bg: #333840;
    --modus-bg-hl-line: #3f4a5f;
    --modus-fg-line-number-inactive: #b8b8b8;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        --modus-bg-main: #2a2a2a;
        --modus-bg-dim: #383838;
        --modus-fg-main: #f5f5f5;
        --modus-fg-dim: #d0d0d0;

        --modus-fg-button-inactive: #d0d0d0;
        --modus-bg-button-inactive: #383838;
        --modus-fg-button-active: #f5f5f5;
        --modus-bg-button-active: #555555;

        --modus-border: #666666;

        --modus-red: #ff5f59;
        --modus-blue: #7bb3ff;
        --modus-blue-warmer: #9bc5ff;
        --modus-cyan: #00d3d0;
        --modus-magenta: #feacd0;

        --modus-prose-code: #6ae4b9;
        --modus-comment: #ef8386;
        --modus-fnname: #f78fe7;
        --modus-variable-name: #4ae2f0;
        --modus-type: #11c777;
        --modus-keyword: #79a8ff;
        --modus-string: #2fafff;
        --modus-constant: #b6a0ff;
        --modus-builtin: #feacd0;
        --modus-org-block-bg: #333840;
        --modus-bg-hl-line: #3f4a5f;
        --modus-fg-line-number-inactive: #b8b8b8;
    }
}

* {
    margin: 0;
    padding: 0;
}

address,
area,
article,
aside,
audio,
blockquote,
datalist,
details,
dl,
fieldset,
figure,
form,
input,
iframe,
img,
meter,
ol,
optgroup,
option,
output,
p,
pre,
progress,
ruby,
section,
table,
textarea,
ul,
video {
    margin-bottom: 1rem;
}

html, input, select, button {
    font-family: var(--modus-font-sans);
}

body {
    margin: 0 auto;
    max-width: 1000px;
    padding: 1rem;
    border-radius: 6px;
    overflow-x: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
    background: var(--modus-bg-main);
    color: var(--modus-fg-main);
    font-size: 1rem;
    line-height: 1.3;
}

main::after {
    content: "";
    display: table;
    clear: both;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1;
    color: var(--modus-fg-main);
    padding: .5rem 0rem;
    margin: .5rem 0rem;
}

h1 {
    font-size: 1.6rem;
    border-bottom: solid 1px var(--modus-border);
}

h2 {
    font-size: 1.4rem;
    border-bottom: solid 1px var(--modus-border);
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1rem;
}

h5 {
    font-size: .8750rem;
}

h6 {
    font-size: .750rem;
}

a {
    color: var(--modus-fg-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

abbr:hover {
    cursor: help;
}

blockquote {
    padding: 1rem;
    background: var(--modus-bg-dim);
    border-left: 5px solid var(--modus-border);
}

abbr {
    cursor: help;
}

blockquote *:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

header {
    background: var(--modus-bg-dim);
    border-bottom: 1px solid var(--modus-border);
    padding: .5rem;
    margin: -1rem calc(50% - 50vw) 1rem;
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
}

nav > *:last-child {
    margin-bottom: .5rem;
}

a button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    font-size: 1rem;
    display: inline-block;
    padding: 6px 12px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: var(--modus-fg-button-inactive);
    background: var(--modus-bg-button-inactive);
    border: 1px solid var(--modus-border);
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
}

a button[disabled],
button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled] {
    cursor: not-allowed;
    opacity: .5;
}

.button:focus,
.button:enabled:hover,
button:focus,
button:enabled:hover,
input[type="submit"]:focus,
input[type="submit"]:enabled:hover,
input[type="reset"]:focus,
input[type="reset"]:enabled:hover,
input[type="button"]:focus,
input[type="button"]:enabled:hover {
    color: var(--modus-fg-button-active);
    background: var(--modus-bg-button-active);
}

a img {
    margin-bottom: 0px;
}

code {
    color: var(--modus-prose-code);
}

code,
kbd,
pre,
samp {
    font-family: var(--modus-font-mono);
}

code,
kbd,
pre,
samp {
    background: var(--modus-bg-dim);
    border: 1px solid var(--modus-border);
    font-size: 90%;
    border-radius: 2px;
    padding: 0px 2px;
    margin: 1rem 0px;
}

kbd {
    border-bottom: 3px solid var(--modus-border);
}

pre {
    padding: 0.5rem;
    max-width: 100%;
    overflow: auto;
}

mark {
    padding: 0px 2px;
    border: 1px solid var(--modus-border);
}

body {
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

pre code {
    background: inherit;
    font-size: inherit;
    color: inherit;
    border: 0;
    padding: 0;
    margin: 0;
}

code pre {
    display: inline;
    background: inherit;
    font-size: inherit;
    color: inherit;
    border: 0;
    padding: 0;
    margin: 0;
}

details {
    padding: .6rem 1rem;
    background: var(--modus-bg-dim);
    border: 1px solid var(--modus-border);
    border-radius: 4px;
}

summary {
    cursor: pointer;
    font-weight: bold;
}

details[open] {
    padding-bottom: .75rem;
}

details[open] summary {
    margin-bottom: 6px;
}

details[open] > *:last-child {
    margin-bottom: 0;
}

details.toc-details {
    background-color: var(--modus-bg-dim);
    border: 1px solid var(--modus-border);
    border-radius: 2px;
    margin-bottom: 1.5rem;
    padding: 0.5rem;
}

.toc-details[open] {
    padding-bottom: 0.75rem;
}

.toc-details summary {
    border-bottom: 1px dotted var(--modus-border);
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
}

.toc-details[open] summary {
    margin-bottom: 0.5rem;
}

.toc-content,
.toc-content ul {
    margin-bottom: 0;
}

.about-portrait {
    float: right;
    margin: 1rem 0 0 1rem;
    max-width: min(220px, 40%);
}

.about-portrait img {
    display: block;
    border: 1px solid var(--modus-border);
    margin-bottom: 0;
}

.page-resume {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 2rem;
    align-items: baseline;
}

.page-resume h1,
.page-resume h2,
.page-resume > p,
.page-resume > ul {
    grid-column: 1 / -1;
}

.page-resume h1 {
    margin-bottom: 0.75rem;
}

.page-resume h2 {
    border-bottom: 1px solid var(--modus-border);
    color: var(--modus-fg-main);
    font-size: 1.25rem;
    margin: 1.65rem 0 0.6rem;
    padding: 0 0 0.35rem;
}

.page-resume h2:first-of-type {
    margin-top: 0.35rem;
}

.page-resume h3 {
    color: var(--modus-fg-main);
    font-size: 1.05rem;
    line-height: 1.2;
    margin: 0.9rem 0 0.25rem;
    padding: 0;
}

.page-resume h3 em {
    color: var(--modus-fg-dim);
    font-weight: normal;
}

.page-resume h3 + p {
    color: var(--modus-fg-dim);
    font-family: var(--modus-font-mono);
    font-size: 0.9rem;
    grid-column: 2;
    justify-self: end;
    margin: 0.9rem 0 0.25rem;
    white-space: nowrap;
}

.page-resume h3 + p + p {
    margin: 0.1rem 0 0.65rem;
}

.page-resume > ul {
    margin: 0.1rem 0 0.7rem;
    padding-left: 1.25rem;
}

.page-resume > ul li {
    margin-bottom: 0.25rem;
}

dt {
    font-weight: bold;
}

dd::before {
    content: '→ ';
}

hr {
    border: 0;
    border-bottom: 1px solid var(--modus-border);
    margin: 1rem auto;
}

fieldset {
    margin-top: 1rem;
    padding: 2rem;
    border: 1px solid var(--modus-border);
    border-radius: 4px;
}

legend {
    padding: auto .5rem;
}

table {
    border-collapse: collapse;
    width: 100%;
}

td,
th {
    border: 1px solid var(--modus-border);
    text-align: left;
    padding: .5rem;
}

th {
    background: var(--modus-bg-dim);
}

tr:nth-child(even) {
    background: var(--modus-bg-dim);
}

table caption {
    font-weight: bold;
    margin-bottom: .5rem;
}

textarea {
    max-width: 100%;
}

ol,
ul {
    padding-left: 2rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
    margin-bottom: 0;
}

textarea,
select,
input {
    padding: 6px 12px;
    margin-bottom: .5rem;
    background: var(--modus-bg-dim);
    color: var(--modus-fg-main);
    border: 1px solid var(--modus-border);
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

figure > img, td > img, video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    border: 1px solid var(--modus-border);
}

aside {
    background-color: var(--modus-bg-dim);
    border: 1px solid var(--modus-border);
    padding: 0.5rem 0.5rem 0rem;
}

div.post-entry {
    background-color: var(--modus-bg-dim);
    border: 1px solid var(--modus-border);
    padding: 0.5rem;
    margin: 0.5rem 0rem;
}

.footnotes p {
    margin-bottom: 0rem;
}

.site-header-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.site-header-element-left {
    flex: 1;
}

.site-header-element-right {
    text-align: right;
    flex: 2;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    padding: 0;
    color: var(--modus-fg-link);
    background: transparent;
    border: 0;
    border-radius: 0;
    font: inherit;
    font-size: .95em;
    line-height: inherit;
    vertical-align: -.08em;
}

.theme-toggle:focus,
.theme-toggle:enabled:hover {
    color: var(--modus-fg-link);
    background: transparent;
    text-decoration: none;
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--modus-fg-link);
    outline-offset: 2px;
}

.site-footer-element-left {
    float: left;
}

@media (max-width: 500px) {
    .site-header-element-left,
    .site-header-element-right {
        flex-basis: 100%;
        text-align: left;
    }

    .site-footer-element-left {
        text-align: left;
        float: none;
    }

    ol,
    ul {
        padding-left: 1.5rem;
    }

    .about-portrait {
        float: right;
        margin: 0 0 0.75rem 0.85rem;
        max-width: 30%;
        width: 96px;
    }

    .page-resume {
        display: block;
    }

    .page-resume h3 {
        margin-bottom: 0.15rem;
    }

    .page-resume h3 + p {
        margin: 0 0 0.4rem;
        white-space: normal;
    }
}

/* Hugo syntax highlighting using variables. */
.bg { color: var(--modus-fg-main); background-color: var(--modus-bg-main); }
.chroma { color: var(--modus-fg-main); background-color: var(--modus-bg-dim); -webkit-text-size-adjust: none; }
.chroma .gh { color: var(--modus-heading-1); }
.chroma .gu { color: var(--modus-heading-2); }
.chroma .err { color: var(--modus-red); }
.chroma .lnlinks { outline: none; text-decoration: none; color: inherit; }
.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
.chroma .hl { background-color: var(--modus-bg-hl-line); }
.chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em; color: var(--modus-fg-line-number-inactive); }
.chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em; color: var(--modus-fg-line-number-inactive); }
.chroma .line { display: flex; }
.chroma .k { color: var(--modus-keyword); }
.chroma .kc { color: var(--modus-constant); }
.chroma .kd { color: var(--modus-keyword); }
.chroma .kn { color: var(--modus-keyword); }
.chroma .kp { color: var(--modus-keyword); }
.chroma .kr { color: var(--modus-keyword); }
.chroma .kt { color: var(--modus-type); }
.chroma .nb { color: var(--modus-builtin); }
.chroma .bp { color: var(--modus-builtin); }
.chroma .nv { color: var(--modus-variable-name); }
.chroma .vc { color: var(--modus-variable-name); }
.chroma .vg { color: var(--modus-variable-name); }
.chroma .vi { color: var(--modus-variable-name); }
.chroma .vm { color: var(--modus-variable-name); }
.chroma .nf { color: var(--modus-fnname); }
.chroma .fm { color: var(--modus-fnname); }
.chroma .l { color: var(--modus-constant); }
.chroma .ld { color: var(--modus-constant); }
.chroma .s { color: var(--modus-string); }
.chroma .sa { color: var(--modus-string); }
.chroma .sb { color: var(--modus-string); }
.chroma .sc { color: var(--modus-string); }
.chroma .dl { color: var(--modus-string); }
.chroma .sd { color: var(--modus-string); }
.chroma .s2 { color: var(--modus-string); }
.chroma .se { color: var(--modus-string); }
.chroma .sh { color: var(--modus-string); }
.chroma .si { color: var(--modus-string); }
.chroma .sx { color: var(--modus-string); }
.chroma .sr { color: var(--modus-string); }
.chroma .s1 { color: var(--modus-string); }
.chroma .ss { color: var(--modus-string); }
.chroma .m { color: var(--modus-fg-main); }
.chroma .mb { color: var(--modus-fg-main); }
.chroma .mf { color: var(--modus-fg-main); }
.chroma .mh { color: var(--modus-fg-main); }
.chroma .mi { color: var(--modus-fg-main); }
.chroma .il { color: var(--modus-fg-main); }
.chroma .mo { color: var(--modus-fg-main); }
.chroma .o { color: var(--modus-fg-main); }
.chroma .ow { color: var(--modus-fg-main); }
.chroma .or { color: var(--modus-fg-main); }
.chroma .c { color: var(--modus-comment); }
.chroma .ch { color: var(--modus-comment); }
.chroma .cm { color: var(--modus-comment); }
.chroma .c1 { color: var(--modus-comment); }
.chroma .cs { color: var(--modus-comment); }
.chroma .cp { color: var(--modus-comment); }
.chroma .cpf { color: var(--modus-comment); }

.highlight {
    position: relative;
    margin: 1rem 0;
}

.highlight pre {
    margin: 0;
}

.highlight::before {
    position: absolute;
    top: 1px;
    right: 1px;
    padding: 0.1rem 0.5rem;
    background-color: var(--modus-bg-main);
    color: var(--modus-fg-dim);
    font-size: 0.75rem;
    font-family: var(--modus-font-sans);
    border-bottom-left-radius: 8px;
    border-top-right-radius: 2px;
    border-left: 1px solid var(--modus-border);
    border-bottom: 1px solid var(--modus-border);
    pointer-events: none;
    z-index: 5;
}

.highlight:has(code[data-lang="emacs-lisp"])::before,
.highlight:has(code[data-lang="elisp"])::before { content: "elisp"; }
.highlight:has(code[data-lang="sh"])::before,
.highlight:has(code[data-lang="bash"])::before { content: "sh"; }
.highlight:has(code[data-lang="ssh-config"])::before,
.highlight:has(code[data-lang="ssh"])::before { content: "ssh"; }
.highlight:has(code[data-lang="conf"])::before { content: "conf"; }
.highlight:has(code[data-lang="caddyfile"])::before,
.highlight:has(code[data-lang="caddy"])::before { content: "caddyfile"; }
.highlight:has(code[data-lang="systemd"])::before { content: "systemd"; }
.highlight:has(code[data-lang="tmux"])::before { content: "tmux"; }
.highlight:has(code[data-lang="org"])::before { content: "org"; }
.highlight:has(code[data-lang="java"])::before { content: "java"; }
.highlight:has(code[data-lang="dart"])::before { content: "dart"; }
.highlight:has(code[data-lang="c"])::before { content: "c"; }
.highlight:has(code[data-lang="cpp"])::before,
.highlight:has(code[data-lang="c++"])::before { content: "cpp"; }
.highlight:has(code[data-lang="dns"])::before { content: "dns"; }
.highlight:has(code[data-lang="python"])::before,
.highlight:has(code[data-lang="py"])::before { content: "python"; }
.highlight:has(code[data-lang="javascript"])::before,
.highlight:has(code[data-lang="js"])::before { content: "js"; }
.highlight:has(code[data-lang="typescript"])::before,
.highlight:has(code[data-lang="ts"])::before { content: "ts"; }
.highlight:has(code[data-lang="rust"])::before,
.highlight:has(code[data-lang="rs"])::before { content: "rust"; }
.highlight:has(code[data-lang="go"])::before,
.highlight:has(code[data-lang="golang"])::before { content: "go"; }
.highlight:has(code[data-lang="html"])::before { content: "html"; }
.highlight:has(code[data-lang="css"])::before { content: "css"; }
.highlight:has(code[data-lang="json"])::before { content: "json"; }
.highlight:has(code[data-lang="yaml"])::before,
.highlight:has(code[data-lang="yml"])::before { content: "yaml"; }
.highlight:has(code[data-lang="sql"])::before { content: "sql"; }
.highlight:has(code[data-lang="makefile"])::before,
.highlight:has(code[data-lang="make"])::before { content: "make"; }
.highlight:has(code[data-lang="dockerfile"])::before,
.highlight:has(code[data-lang="docker"])::before { content: "docker"; }
.highlight:has(code[data-lang="text"])::before,
.highlight:has(code[data-lang="plain"])::before { content: "text"; }