@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('AtkinsonHyperlegible-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('AtkinsonHyperlegible-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('AtkinsonHyperlegible-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body {
    margin: 1em;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 14pt;
    line-height: 1.4;
    letter-spacing: 0.008em; /* lol */
    max-width: 40em;
}
body.lorge {
    max-width: 100%;
}
div.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}
input#search {
    font-size: 14pt;
    flex: 2;
}
span.tag {
    font-size: 10pt;
    border: 1px solid grey;
}
body > main > section > ul.bigmargins > li {
    margin-bottom: 0.5em;
}
body > ul > li, section > ul > li, main > section > ul > li {
    margin-bottom: 0.3em;
}
.secret { color: white; }
.highlight { background-color: #e3e3e3; }
tr:nth-child(2n) { background-color: #ccc; }
hr { color: #454955; margin-bottom: 1em;}
@media(prefers-color-scheme: dark) {
    hr { color: #f3eff5; }
    body { background-color: #454955; color: #f3eff5; }
    .highlight { background-color: #5c6171; }
    .secret { color: #454955; }
    a, a:visited { color: #a5e250; }
    tr:nth-child(2n) { background-color: #222; }
}

dd {
    margin-bottom: 0.4em;
}
footer img { image-rendering: pixelated; }