@font-face {
    font-family: "Ioskeley Mono";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("fonts/ioskeley_mono-subset.woff2") format("woff2");
}

:root {
    --surface-0: #ebebeb;
    --text-1: #444;
    --text-2: #000;
}

*::selection {
    background: var(--text-1);
    color: var(--surface-0);
}

html {
    font-family: "Ioskeley Mono", ui-monospace, monospace;
    font-size: 100%;
    block-size: 100%;
    overflow-y: scroll;
    text-rendering: optimizeSpeed;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: var(--_lh, 1.8);
}

img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    border-radius: 1rem;
}

svg {
    max-block-size: 100%;
    pointer-events: none;
}

body {
    min-block-size: 100dvh;
    font-size: .875rem;
    font-weight: 400;
    padding-inline: 1rem;
    background-color: var(--surface-0);
    color: var(--text-1);
}

footer {
    display: flex;
    gap: 1rem;
    align-items: center;
}

main, footer {
    max-inline-size: 64ch;
    margin-inline: auto;
}

body, main {
    padding-block: 10vh
}

h1 {
    font-size: 1rem;
}

p,
ul,
ol,
dl {
    text-wrap: pretty;
}

ul:not(.entries),
ol {
    margin-inline-start: 1em;
}

ul:not(.entries) > * + * {
    margin-block-start: 0.5em;
}

a {
    text-decoration: none;
    color: var(--text-2);
    transition: color 0.3s;
}

a:not(.entries a, footer a) {
    text-decoration: dashed underline;
    text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
    outline: transparent;
    color: var(--text-1);
}

[role="list"] {
    list-style: none;
}

figure {
    text-align: center;
}

figure img {
    margin-inline: auto;
}


figcaption {
    font-size: 0.75rem;
}

.stack > * + * {
    margin-block-start: 1em;
}

.sr-only {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    word-wrap: normal;
}

.entries:hover li a {
    color: var(--text-1);
    opacity: .5;
}

.entries li a {
    display: block;
    padding-block: .5em;
    transition: color .3s, opacity .3s;
}

.entries li a:hover {
    color: var(--text-2);
    opacity: 1;
}