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

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

    --margins: 0;

    --color-node: var(--color-gray);
    --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-node);
    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: 1.5ex;
}

.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);
}