: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;
}

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

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

.math-inline {

}

.math-block {
    margin: 1em 0;

    text-align: center;
}

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

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

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