@font-face {
    font-family: "Vagari";
    src: url("../fonts/vagari-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;
    background-color: var(--c-bg);
}

body {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    color: var(--c-fg);
    font-family: var(--ff-mono);
    font-size: var(--fs-6);
    line-height: var(--lh-5);
}

main {
    flex-grow: 1;
    display: grid;
    place-content: center;
    padding: var(--s-12) var(--s-8);
}

a {
    color: var(--c-link-i);
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--c-link-o);
}

:focus-visible {
    outline: 2px solid var(--c-1);
    outline-offset: 2px;
}

.notice {
    display: grid;
    gap: var(--s-6);
}

.notice h1 {
    color: var(--c-fg-up);
    font-size: var(--fs-9);
    line-height: var(--lh-3);
}

.notice p {
    max-width: none;
    color: var(--c-fg-dn);
}

.notice code {
    color: var(--c-2);
    overflow-wrap: anywhere;
}