/* Inter font */

:root {
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;
    /* fix for Chrome */
}

@supports (font-variation-settings: normal) {
    :root {
        font-family: InterVariable, sans-serif;
    }
}

/* Main styling */

:root {
    --background-color: white;
    --color: black;

    --borders: #ddd;

    --toc-evens-background: #fefefe;

    --highlighted: rgb(255, 255, 174);

    --anchor-link: blue;
    --anchor-visited: purple;
    --anchor-active: red;

    --positive-trait: #1e9826;
    --neutral-trait: #fce202;
    --negative-trait: #af2315;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #222;
        --color: #ddd;

        --borders: #555;

        --toc-evens-background: #252525;

        --highlighted: rgb(83, 83, 58);

        --anchor-link: rgb(141, 211, 234);
        ;
        --anchor-visited: rgb(195, 141, 234);
        --anchor-active: rgb(213, 115, 115);
        ;
    }
}

html {
    font-family: sans-serif;
    position: relative;
    top: 0;
    left: 0;
    margin: 1em;
    width: calc(100vw - 2em);

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

h2 {
    font-size: 1.5em;

    &>i.icons {
        width: 1.5em;
        height: 1.5em;
    }
}

body {
    margin: 0 auto;
    max-width: 60em;
    padding-bottom: 2em;
}

a {
    text-decoration: none;

    &>span.text-span {
        text-decoration: underline;
    }
}

p a {
    text-decoration: underline;
}

ul#table-of-contents {
    display: grid;
    grid: auto-flow / 1fr 1fr 1fr 1fr 1fr;
    list-style: none;

    padding: 0;
    border: 1px solid var(--borders);

    &>li {
        display: block;
        width: 100%;
        height: 4.5em;

        border: 1px solid var(--borders);

        &>a {
            display: flex;
            width: 100%;
            height: 100%;

            flex-direction: column;

            text-align: center;

            align-items: center;
            justify-content: center;

            text-decoration: none;

            &>span.icon-span {
                font-size: 24pt;
                height: 24pt;

                &>i.icons {
                    width: 24pt;
                    height: 24pt;
                }
            }
        }
    }

    &>li:nth-child(even) {
        background-color: var(--toc-evens-background);
    }

    &>li:hover {
        background-color: var(--highlighted);
    }
}

ul.link-list {
    display: flex;

    list-style: none;
    padding: 0;

    &>li {
        width: 10em;
        height: 2em;
        border: 1px solid var(--borders);

        margin: 0 1em;

        &>a {
            display: flex;
            width: 100%;
            height: 100%;

            text-align: center;

            align-items: center;
            justify-content: center;
        }
    }

    &>li:hover {
        background-color: var(--highlighted);
    }
}

i.icons {
    color: var(--color);
    text-decoration: none;
}

@media (width < 900px) {
    ul#table-of-contents {
        grid: auto-flow / 1fr 1fr 1fr 1fr;
    }
}

@media (width < 700px) {
    ul#table-of-contents>li {
        height: 3.5em;
    }

    ul#table-of-contents>li>a>span.icon-span {
        display: none;
    }
}

@media (width < 600px) {
    ul#table-of-contents {
        grid: auto-flow / 1fr 1fr 1fr;
    }
}

details>h3,
details>p,
details>section {
    padding: 0 1em;
}

details {
    border: 1px solid var(--borders);
}

details>summary {
    user-select: none;
    cursor: pointer;

    padding: 0.5em;

    &:hover {
        background-color: var(--highlighted);
    }
}

details[open]>summary {
    border-bottom: 1px solid var(--borders);
    padding-bottom: 0.5em;
}

section.page-item {
    padding: 0.25em 0;
}

a {
    &:link {
        color: var(--anchor-link);
    }

    &:visited {
        color: var(--anchor-visited);
    }

    &:active {
        color: var(--anchor-active);
    }
}

li[data-trait="-"] {
    color: var(--negative-trait);
}
li[data-trait="0"] {
    color: var(--neutral-trait);
}
li[data-trait="+"] {
    color: var(--positive-trait);
}

p.invitation {
    font-size: 9pt;
}