:root {
    --accent: #286c93;
    --surface: #ebebeb;
    --surface-variant: #dedede;
    --text: #3c3c3c;
    --text-strong: #2c2c2c;
    --text-weak: #7c7c7c;
    --border-radius: 10px;
}

* {
    box-sizing: border-box;
    scroll-margin-top: 2em;
}

body {
    background-color: var(--surface);
    color: var(--text);
    font-family: 'Droid Sans Mono', 'monospace', monospace;
    margin: 0;
}

nav {
    position: absolute;
    padding: 1em;
    z-index: 1;

    a {
        font-size: 1.2em;
        color: var(--text);
        text-decoration: none;
    }
}


body > main {
    padding: 10em 2em 90vh 2em;
    max-width: 50em;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    flex-direction: column;

    h1 {
        font-size: 2em;
        margin-bottom: 0;
    }

    h1 + .syllables {
        font-size: 1.2em;
        margin-bottom: 2em;
    }

    ul {
        list-style: none;
        padding-left: 0;

        li {
            display: flex;
            margin-bottom: 1em;
            cursor: pointer;
            transition: all 0.5s ease;

            &:hover:not(&:has(a:hover)) {
                opacity: 0.6;
            }

            &:active {
                opacity: 0.3
            }

            &::before {
                content: var(--list-marker, "\F199");
                font-family: "Bootstrap-icons";
                margin-right: 1em;
                color: var(--accent);
                transform: translateY(0.25em);
            }
        }
    }

    article {
        h2 {
            font-size: 1.2em;
            margin: 0;
            color: var(--acc);
        }

        .syllables {
            font-size: 0.9em;
        }

        .definition {
            margin-top: 0.25em;
        }
    }

    .syllables {
        margin-top: 0;
        margin-bottom: 0;
        font-style: italic;

        &:before {
            content: "(";
            font-family: "Bootstrap-icons";
        }

        &:after {
            content: ")";
        }

        > .word {
            span + span::before {
                content: "·";
                color: var(--accent);
            }
        }
    }
}

a {
    color: var(--accent);
    text-decoration: none;
}