html {
    font-size: 12px;

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

    --primary: hsl(350, 50%, 50%);
    --muted-primary: hsl(350, 35%, 50%);
    --extra-muted-primary: hsl(350, 20%, 95%);
    --background-color: hsl(40, 60%, 99%);
    --muted-black: hsl(0, 0%, 30%);
    --light-gray: hsl(0, 0%, 90%);
    --light-gray-transparent: hsla(0, 0%, 90%, 90%);

    --title: 12rem;
    --heading-large: 4rem;
    --heading-med: 3rem;
    --heading-small: 2rem;
    --content-large: 3rem;
    --content-med: 2rem;
    --content-small: 1.5rem;

    --h-spacing-1: 2vw;
    --h-spacing-2: 4vw;
    --h-spacing-3: 8vw;
    --h-spacing-4: 16vw;

    --v-spacing-1: 2vh;
    --v-spacing-2: 4vh;
    --v-spacing-3: 8vh;
    --v-spacing-4: 16vh;
}

* {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6 {
    font-family: serif;
}

h1 {
    font-size: var(--heading-large);
}

h2 {
    font-size: var(--heading-med);
}

h3 {
    font-size: var(--heading-small);
}

a {
    color: var(--muted-black);
    text-decoration-color: var(--muted-primary)
}

a:hover {
    color: black;
    text-decoration-color: var(--primary)
}

a, span, p, li, td, th {
    font-size: var(--content-small);
    line-height: 1.5;
}

ol {
    padding-left: var(--h-spacing-1);
}

li {
    list-style-position: inside;
    margin-bottom: 10px;
}

hr {
    background-color: var(--primary);
    height: 3px;
}

nav {
    position: fixed;
    left: var(--v-spacing-2);
    top: var(--v-spacing-2);

    display: flex;
    flex-direction: row;
}

nav img {
    width: 30px;
}

#muted-nav {
    position: absolute;
    z-index: 100;
}

#muted-nav:hover {
    opacity: 0;
}


html::-webkit-scrollbar{
    width: 10px;               /* horizontal scrollbar thickness */
}

html::-webkit-scrollbar-track{
    background: var(--light-gray);
}

html::-webkit-scrollbar-thumb {
    background: var(--muted-primary);

}

html::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

@media (max-width: 1000px) {
    html {
        --title: 6rem;
        --heading-large: 2.7rem;
        --heading-med: 2rem;
        --heading-small: 1.3rem;
        --content-large: 2rem;
        --content-med: 1.3rem;
        --content-small: 1rem;
    }
}