html {
    font-family: "Libertinus Serif", serif;
    font-size: 18pt;
    line-height: 1.5em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Mojangles", "monospace";
}

code {
    font-family: "Libertinus Mono", monospace;
}

math {
    font-family: "Libertinus Math", math;
}

main, header, footer {
    max-width: 80ch;
    margin-inline: auto;
}

li > * {
    margin-block: 0;
}

.callout {
    display: block;
    margin-inline: -2ch;
    padding-inline: 2ch;
    padding-block: 1ch;
    border-radius: 4pt;
    border-width: 1pt;
    border-style: solid;

    color: var(--mode-color);
    border-color: rgba(from var(--mode-color) r g b);
    background-color: rgba(from var(--mode-color) r g b / 5%);
}

.callout::before {
    content: var(--mode-name);
    padding-inline-end: 1ch;
    font-family: "Mojangles", "monospace";
    display: inline-block;
    float: left;
}

.callout > p:first-child {
    display: inline;
}

.note {
    --mode-name: "Note";
}

.caution {
    --mode-name: "Caution";
}

.tip {
    --mode-name: "Tip";
}

@media (prefers-color-scheme: dark) {
    .note {
        --mode-color: cyan;
    }

    .caution {
        --mode-color: coral;
    }

    .tip {
        --mode-color: springgreen;
    }
}

@media (prefers-color-scheme: light) {
    .note {
        --mode-color: blue;
    }

    .caution {
        --mode-color: orangered;
    }

    .tip {
        --mode-color: seagreen;
    }
}