:root {
    --hightlight: #72dec2;
    --text: #181715;
    --bg: #ffffff;
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --text: #ffffff;
        --bg: #181715;
    }
}

@font-face {
    font-family: "Iosevka";
    src: url('/font/iosevka-regular.woff') format('woff');
}

body {
    font-family: 'Iosevka';
    font-size: 110%;
    color: var(--text);
    background: var(--bg);
}

main {
    max-width: 52rem;
    margin: 0 auto;
}

a,
a:visited {
    text-decoration: underline;
    color: var(--text);

    &:hover {
        background-color: var(--hightlight);
        text-decoration: line-through var(--text);
        cursor: pointer;
    }
}

header {
    user-select: none;
    text-align: center;
}

h1 {
    font-variant: small-caps;
    letter-spacing: 0.3rem;
    font-size: 4em;
    margin: 3rem auto;

    & > a {
        text-decoration: none;
    }
}

h2 {
    font-variant: small-caps;
    letter-spacing: 0.3rem;

    & > a {
        text-decoration: none;
    }
}

p {
    margin-left: 1rem;
    text-align: justify;
}


details {
    margin-left: 1rem;
}

footer {
    border-top: 2px solid var(--text);
    padding-top: 1rem;
    max-width: 42rem;
    margin: 2rem auto;
    text-align: center;

    & .links {
        display: flex;
        flex-direction: row;
        gap: 2rem;
        justify-content: center;
        margin-top: 1rem;
    }
}