@font-face {
    font-family: "Mojangles";
    font-style: normal;
    font-weight: 400;
    src: url("mojangles-ascii.woff2");
    unicode-range: U+0000-007F;
}

:root {
    font: 1rem / 1.5 sans-serif;
}

.tip {
    color: forestgreen;
}

.warn {
    color: brown;
}

.note {
    color: mediumblue;
}

.todo {
    color: red;
    border-block-width: 9px !important;
    border-style: double !important;
}

@media print {
    :root {
        font: 10pt / 1.5 serif
    }
}

@media (prefers-color-scheme: dark) {
    .tip {
        color: springgreen;
    }

    .warn {
        color: coral;
    }

    .note {
        color: cyan;
    }
}

h1, h2, h3, h4, h5, h6, nav, details > summary {
    font-family: Mojangles, monospace;
}

pre {
    overflow-x: scroll;
}

ol {
    padding-inline-start: 2ch;
}

nav > ol {
    padding-inline-start: 0;
}

body {
    max-width: 68ch;
    margin: 40px auto;
    padding: 0 10px;
}

.callout {
    margin: 1em -1em;
    padding: 0.5em 1em;
    background: rgb(from currentColor r g b / 5%);
    border: solid currentColor;
    border-width: 1px 0;
}

.callout .callout {
    margin-inline: 0em;
}

hr {
    margin: 0 -1em;
}

header p:has(+h1) {
    margin-block-end: 0;
    font-family: Mojangles, monospace;
}

header p + h1 {
    margin-block-start: 0;
}

.callout h1,
.callout h2,
.callout h3,
.callout h4,
.callout h5,
.callout h6,
.callout h1 + p,
.callout h2 + p,
.callout h3 + p,
.callout h4 + p,
.callout h5 + p,
.callout h6 + p {
    display: inline;
}

.callout *:last-child {
    margin-block-end: 0;
    padding-block-end: 0;
}