:root {
    --clr-accent-400: hsl(229, 100%, 60%);
    --clr-accent-600: hsl(229, 100%, 40%);

    --clr-primary-400: hsl(228, 39%, 23%);

    --clr-neutral-200: hsl(0, 0%, 80%);
    --clr-neutral-500: hsl(0, 0%, 40%);
    --clr-neutral-900: hsl(0, 0%, 10%);

    --ff-primary: "Roboto Slab", sans-serif;

    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-primary);

    --fw-light: 300;
    --fw-regular: 500;
    --fw-bold: 700;

    --fs-300: 0.75rem;
    --fs-500: 1rem;
    --fs-600: 1.25rem;
    --fs-700: 1.5rem;

    --fs-body: var(--ff-500);
    --fs-primary-heading: var(--fs-700);
    --fs-secondary-heading: var(--fs-600);
    --fs-nav: var(--fs-500);
    --fs-button: var(--fs-300);

    --clr-nav-background: var(--clr-neutral-900);
    --clr-nav-font: var(--clr-neutral-200);
    --clr-article-background: var(--clr-neutral-200);
}

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

html,
body {
    height: 100%;
    background: var(--clr-neutral-500);
    margin: 0 auto;
    font-weight: var(--fw-regular);
}

.container {
    width: 80%;
    margin: 0 auto;
}

header {
    background: var(--clr-nav-background);
    font-family: var(--ff-heading);
    font-size: var(--fs-nav);
}

header::after {
    /* whatever element comes after the header is affected by this */
    content: "";
    display: table;
    clear: both;
}

nav {
    float: right;
}

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

nav li {
    /* list items inside the nav element */
    display: inline-block;
    margin-left: 70px;
    padding: 10px 0;

    position: relative;
}

nav a {
    /* links in the navbar, could also be nav ul li a to be super specific */
    color: var(--clr-nav-font);
    text-decoration: none;
    text-transform: uppercase;
}

nav a:hover {
    /* change on hover */
    text-transform: uppercase;
}

nav a::before {
    /* whatever is in my link before the text */
    content: "";
    display: block;
    height: 5px;
    background-color: var(--clr-nav-font);

    position: absolute;
    top: 0;
    width: 0%;

    transition: all ease-in-out 300ms;
}

nav a:hover::before {
    width: 100%;
}

article {
    margin: 5% 10%;
    border-style: solid;
    border-width: 1px;
    padding: 5%;

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

    font-family: var(--ff-body);
    font-size: var(--fs-500);
    font-weight: var(--fw-light);
    line-height: var(--fs-700);
    text-align: justify;
}

article a {
    text-decoration: underline;
    color: var(--clr-primary-400);
}

article span a {
    float: right;
}

article h1 {
    font-size: var(--fs-primary-heading);
    padding: 0;
    margin: 0 0 20px 0;
}

article h2 {
    font-size: var(--fs-secondary-heading);
    padding: 0;
    margin: 0 0 10px 0;
}