:root {
    --font-size: 18px;

    --serif-family: serif;
    --sans-serif-family: Arial, Helvetica, sans-serif;

    --font-color: hsl(0, 0%, 0%);
    --muted-font-color: hsl(0, 0%, 45%);
    --background-color: hsl(0, 0%, 100%);

    --link-color: hsl(240, 100%, 50%);
    --visited-link-color: hsl(270, 70%, 30%);
    --active-link-color: hsl(0, 100%, 50%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --font-color: hsl(0, 0%, 100%);
        --muted-font-color: hsl(0, 0%, 65%);
        --background-color: hsl(0, 0%, 0%);

        --link-color: hsl(240, 100%, 80%);
        --visited-link-color: hsl(270, 70%, 80%);
        --active-link-color: hsl(0, 100%, 50%);
    }
}

body {
    font-family: var(--serif-family);
    font-size: var(--font-size);
    color: var(--font-color);
    background-color: var(--background-color);
}

body {
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: stretch;
}

body {
    width: min(60ch, 100%);
}

body>nav {
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    border: solid 2px var(--muted-font-color);
    border-top: none;
}

body>nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    align-items: center;

    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
}

address {
    font-family: Arial, Helvetica, sans-serif;
}

body>nav {
    padding: 1ch;
}

body>footer {
    padding: 1ch;
}

body>nav>ul {
    list-style: none;

    display: flex;
    flex-direction: row;
    column-gap: 0.5em;
}

address {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    justify-content: space-between;
}

article>header {
    font-size: 2em;
}

article>section>header {
    font-size: 1.5em;
}

article>section>section>header {
    font-size: 1.25em;
}

article>section>section>section>header {
    font-size: 1em;
}

body>nav>a.home {
    margin-right: 2ch;
}

:link {
    color: var(--link-color);
}

:visited {
    color: var(--visited-link-color);
}

/* For local links */
[href^="#"]:visited {
    color: var(--link-color);
}

:link:active,
:link:visited:active {
    color: var(--active-link-color);
}

a.home {
    font-size: 1.5em;
    font-weight: bold;
}

ul.social.media {
    list-style: none;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    column-gap: 1em;
}

ul.social.media a {
    display: inline-flex;
    align-items: center;
}

ul.social.media a::before {
    display: inline-block;
    content: "";
    background-size: contain;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
}

ul.social.media a.linkedin::before {
    background-image: url("./images/linkedin-logo.png");
}

ul.social.media a.github::before {
    background-image: url("./images/github-logo.png");
}

p+ul {
    margin-top: 0.25em;
}

ul+p {
    margin-top: 0.25em;
}

ul {
    padding-left: 0.5em;
}

p+p {
    margin-top: 1em;
}

header {
    margin-top: 0.75em;
    margin-bottom: 0.25em;
}

header {
    font-family: var(--sans-serif-family);
    font-weight: bold;
}

blockquote {
    font-style: italic;
    padding: 0 1em;
}