@font-face {
    font-family: "Hack";
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url("/fonts/hack-regular.woff2") format("woff2");
}
@font-face {
    font-family: "Hack";
    font-style: italic;
    font-weight: normal;
    font-display: swap;
    src: url("/fonts/hack-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Hack";
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url("/fonts/hack-bold.woff2") format("woff2");
}
@font-face {
    font-family: "Hack";
    font-style: italic;
    font-weight: bold;
    font-display: swap;
    src: url("/fonts/hack-bolditalic.woff2") format("woff2");
}

@font-face {
    font-family: "Sharp PC3K-2x";
    font-style: normal;
    font-display: swap;
    src: url("/fonts/sharp-pc3k-2x.woff") format("woff");
}

@font-face {
    font-family: "Sharp PC3K";
    font-style: normal;
    font-display: swap;
    src: url("/fonts/sharp-pc3k.woff") format("woff");
}

:root {
    font-family: "Hack", monospace;
    font-size: 1em;
    line-height: 1.25;

    --foreground: #181818;
    --foreground-light: #888888;
    --background: #eeeeee;
    --background-light: #e2e2e2;

    --gradient: linear-gradient(#7da2c8, #90bfc5);
    --accent: #c6724b;

    --background-gradient: var(--gradient);
    --background-grid-size: 3em;

    background-color: var(--background);
    color: var(--foreground);
}

p {
    margin-top: .8em;
    margin-bottom: .8em;
}
i {
    color: var(--foreground-light);
}
h1, h2, h3, h4, h5 {
    margin-top: .8em;
    margin-bottom: .8em;
}

a {
    text-decoration: underline;
    cursor: pointer;
    color: var(--accent);
    transition:
        color .15s,
        text-shadow .15s;
}
a:hover {
    --hover-color: color-mix(in oklab, var(--accent), #ffffff 40%);

    color: var(--hover-color);
    text-shadow: 0 0 0.2em var(--hover-color);
}

figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* the default margin does NOT need to be doin allat */
    margin: 0 1em;
}
figure img {
    width: 100%;
    height: auto;
}
figcaption {
    color: var(--foreground-light);
    text-align: center;
    font-size: 0.7em;
}

summary {
    list-style: none;
}
summary::marker,
summary::-webkit-details-marker { /* webkit. i am going to crash out */
    display: none;
}
summary::before {
    font-family: monospace;
    content: "\25ba";
    margin-right: 0.5em;
    color: var(--foreground-light);
}
details[open] summary::before {
    transform: rotate(90deg);
}

@media screen and (prefers-reduced-motion: reduce) {
    a {
        transition: none;
    }
}
