@media (prefers-color-scheme: light) {
    :root {
        --background-color: #f2f2f2;
        --foreground-color: #222222;
        --link-color: blue;
        --link-vis-color: rebeccapurple;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #222222;
        --foreground-color: #f2f2f2;
        --link-color: cyan;
        --link-vis-color: violet;
    }
}

body {
    background: var(--background-color);
    color: var(--foreground-color);
    font-family: monospace;
    max-width: 40em;
}

.box {
    border-width: 1px;
    border-style: solid;
    border-color: var(--foreground-color);
    border-radius: 8px;
    margin: 1em;
    padding: 1em;
}

.indent {
    margin-left: 1em;
}

.bold {
    font-weight: bold;
}

.tooltip {
    text-decoration-line: underline;
    text-decoration-color: var(--foreground-color);
    text-decoration-style: dotted;
}

.tooltip:hover {
    cursor: default;
}

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

a:visited {
    color: var(--link-vis-color);
}