:root {
    background-color: oklch(0.9961 0.0034 325.6);
    font-family: "Montserrat", sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;
    font-size: 100%;
}

nav {
    --text: oklch(0.99 0.003 325);
    --bg: oklch(0.45 0.32 40);

    ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin: 0;
        padding: 0;
    }

    a {
        color: var(--text);
        background-color: var(--bg);
        text-decoration: none;
        display: block;
        padding-block: 1rem;
        padding-inline: 2rem;
        transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out;

        &:hover,
        &:focus-visible {
            color: var(--bg);
            background-color: var(--text);
        }
    }
}

body {
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 40em;
    margin-inline: auto;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    margin-block-end: 0.25em;
    font-size: 1.5em;
}

h2 + h3 {
    margin-block-start: 0.5em;

    p {
        margin-block: 0.75em 0.75rem;
    }
}

.metadetails {
    font-style: italic;
}

.introduction {
    color: oklch(0.6608 0.1546 39.88 / 86%);
    font-weight: 500;
}