:root {
    --color-background: #ffffff;
    --color-foreground: #000000;
    --color-accent: initial;

    --color-canvas-gray: #7E7E7E;
    --color-canvas-red: #FB464C;
    --color-canvas-orange: #E9973F;
    --color-canvas-yellow: #E0DE71;
    --color-canvas-green: #44CF6E;
    --color-canvas-blue: #53DFDD;
    --color-canvas-purple: #A882FF;
    --color-canvas: var(--color-canvas-gray);

    --color-callout-gray: #9e9e9e;
    --color-callout-red: #e93147;
    --color-callout-orange: #ec7500;
    --color-callout-yellow: #e0ac00;
    --color-callout-green: #08b94e;
    --color-callout-cyan: #00bfbc;
    --color-callout-blue: #086ddd;
    --color-callout-purple: #7852ee;
    --color-callout-pink: #d53984;
    --color-callout: var(--color-callout-gray);

    --margins: 0;

    --node-group-border-width: 2px;
    --node-file-border-width: 2px;
    --edge-width: 2px;
    --font-text: sans-serif;
    --font-mono: monospace;
    --math-border-width: 1px;
    --blockquote-border-width: 2px;
}

@media screen {
    :root {
        --margins: 32px;
    }
}

@media screen and (min-width: 768px) {
    :root {
        --margins: 64px;
    }
}

body {
    margin: 0;
    width: max-content;
    min-width: 100svw;
    height: max-content;

    background-color: var(--color-background);
    color: var(--color-foreground);
}

body > h1 {
    margin-left: var(--margins);
    margin-right: var(--margins);
    font-size: 4em;
}

* {
    font-family: var(--font-text);
}

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

a {
    color: var(--color-accent);
}

svg line {
    stroke: var(--color-canvas);
    stroke-width: var(--edge-width);
}

blockquote {
    border-left: var(--blockquote-border-width) solid var(--color-accent);
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-left: 12px;
}

.math {
    overflow-x: auto;
    overflow-y: hidden;
}

.math-inline {

}

.math-block {
    margin: 1em 0;

    text-align: center;
}

a, .wikilink {
    color: color-mix(in srgb, var(--color-accent) 50%, transparent);
    text-decoration: underline 1px dashed color-mix(in srgb, var(--color-accent) 50%, transparent);
}

a[href], .wikilink[href] {
    color: var(--color-accent);
    text-decoration: underline 1px solid var(--color-accent);
    cursor: pointer;
}

a[href]:hover, .wikilink[href]:hover {
    color: color-mix(in srgb, var(--color-accent) 50%, var(--color-foreground));
    text-decoration: underline 1px solid color-mix(in srgb, var(--color-accent) 50%, var(--color-foreground));
}

h1 a, .wikilink.wikilink-heading {
    color: var(--color-foreground);
}

h1 a:hover, .wikilink.wikilink-heading:hover {
    color: var(--color-foreground);
}

.callout {
    background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.callout [slot="callout-admonition"] {
    color: var(--color-accent);
    font-weight: bold;
}

.callout-abstract, .callout-summary, .callout-tldr {
    --color-accent: var(--color-callout-cyan);
}

.callout-info, .callout-note, .callout-default {
    --color-accent: var(--color-callout-blue);
}

.callout-todo {
    --color-accent: var(--color-callout-blue)
}

.callout-tip, .callout-hint, .callout-important {
    --color-accent: var(--color-callout-cyan);
}

.callout-success, .callout-check, .callout-done {
    --color-accent: var(--color-callout-green);
}

.callout-question, .callout-help, .callout-faq {
    --color-accent: var(--color-callout-orange);
}

.callout-warning, .callout-caution, .callout-attention {
    --color-accent: var(--color-callout-orange);
}

.callout-failure, .callout-fail, .callout-mission {
    --color-accent: var(--color-callout-red);
}

.callout-danger, .callout-error {
    --color-accent: var(--color-callout-red);
}

.callout-bug {
    --color-accent: var(--color-callout-red);
}

.callout-example {
    --color-accent: var(--color-callout-purple);
}

.callout-quote, .callout-cite {
    --color-accent: var(--color-callout-gray);
}