@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&display=swap');

:root {
    --background: white;
    --text: black;
    --link-color: blue;
    --link-visited: var(--link-color);
    --link-active: red;
    --border-light: rgba(0, 0, 0, .1);
    --body-margin: 1rem;
    --body-width: 35rem;
    --font-family: 'Atkinson Hyperlegible Mono', monospace;
}

html, body {      
    margin: 0;
    background: var(--background);
    color: var(--text);
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-size: 14px;
    margin: var(--body-margin);
    font-family: var(--font-family);
    max-width: var(--body-width);
    line-height: 1.5em;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2em;
}

figure {
    width: fit-content;
    margin: 0;
    position: relative;
    line-height: 0;
    box-shadow: inset 0 0 0 1px var(--border-light);
}
figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: none;
    background: var(--link-color);
    color: var(--background);
    padding: .5em;
    line-height: 1.5em;
    font-size: 1rem;
    font-family: var(--font-family);
    z-index: 1;
}
figure:hover figcaption {
    display: block;
}

img {
    max-width: 100%;
    height: auto;
    line-height: 0;
}

hr {
    display: block;
    background-image: url("/static/border.png");
    background-repeat: repeat-x;
    background-position: center;
    height: .5em;
    width: 100%;
    border: none;
    image-rendering: pixelated;
    margin: 1.5em 0;
}

a, button {
    text-decoration: none;
    color: var(--link-color);
}
a:visited {
    color: var(--link-visited);
}
a:active, button:active {
    color: var(--link-active);
}
a:hover, button:hover {
    text-decoration: underline;
}
a:not(:has(img))[target="_blank"]::after {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    height: 1em;
    width: 1em;
    background-image: url("/static/external-link.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    image-rendering: pixelated;
}

button {
    border: 1px dotted var(--text);
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}
button:hover {
    border-style: solid;
}
button:active {
    border-color: var(--link-active);
}

details {
    margin-bottom: .5em;
}

summary {
    cursor: pointer;
}
summary:focus {
    outline: none;
}
details[open] summary {
    border-bottom: 1px solid var(--border-light);
    padding-bottom: .25em;
    margin-bottom: .25em;
}

ul, ol {
    padding-left: 3em;
    list-style: none;
}
ul li {
    position: relative;
}
ul li::before {
    content: '';
    position: absolute;
    left: -1.3em;
    height: 1em;
    width: 1em;
    background-image: url("/static/list-icon-1.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    image-rendering: pixelated;
    mix-blend-mode: exclusion;
}
ul li:nth-child(3n + 1)::before {
    background-image: url("/static/list-icon-2.png");
}
ul li:nth-child(3n + 2)::before {
    background-image: url("/static/list-icon-3.png");
}

nav {
    border: 1px solid var(--border-light);
    width: fit-content;
}
nav button, nav button:hover, nav button:active {
    border: none;
    border-right: 1px solid var(--border-light);
}

@media print {
    body {
        max-width: unset;
    }
    nav {
        display: none;
    }
    summary:focus {
        border: none;
    }
    a:visited, a:active {
        color: var(--link-color);
    }
    a:hover {
        text-decoration: none;
    }
    a:not(:has(img))[target="_blank"]::after {
        display: none;
    }
    .hide-on-print {
        display: none;
    }
}

/* @media (prefers-color-scheme: dark) {
    :root {
        --background: rgb(20, 20, 20);
        --text: rgb(198, 199, 192);
        --link-color: rgb(61, 138, 219);
        --border-light: rgb(97.306, 99.091, 108.804)
    }
    figcaption {
        background: var(--background);
        color: var(--text);
    }
} */