*, *::before, *::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
}

.container {
    max-width: 80rem;
    margin-inline: auto;
    padding: 0 1rem;
}

header {
    background-color: oklch(0.1454 0.062 264);
    color: oklch(0.9961 0.0034 325.6);
}

nav {
    ul {
        padding: 0;
        margin: 0 0 0 -2rem;
        list-style: none;

        li:nth-child(2) {
            background-color: oklch(0.866 0.016 17.459);
        }

        a {
            padding: 1rem 2rem;
            display: inline-block;
            color: inherit;
            text-decoration: none;
        }

        a:focus-visible {
            border-style: dotted;
            border-width: 4px;
        }
        a:hover{
            background-color: oklch(0.286 0.1567 264);
        }
    }

}

h2 ~ p {
    font-style: italic;
}

a[href*="mozilla"] {
    background-color: oklch(0.7818 0.1706 68.61 / 83.45%);
}

footer {
    background-color: oklch(0.3211 0 0);

    p:last-of-type {
        margin: 0;
    }

    .highlight {
        font-family: "Droid Sans Mono Dotted", sans-serif;
        color: oklch(0.7818 0.3004 142.73);
        font-weight: normal;
    }
}

.highlight {
    font-family: cursive;
}

.container--narrow {
    max-width: 40rem;
}

.m-1 {
    margin: 1rem;
}

.p-1 {
    padding: 1rem;
}

main {
    padding: 2vh 0 4vw;
}