html,
body,
section {
    font-family: monospace;
    color: black;
    background-color: white;
}

.nav {
    text-align: left;
}

.container {
    max-width: 600px;
}

section.footer div.container {
    max-width: 700px;
}

body>section>div>article {
    padding-bottom: 6em;
}

body>section>div>article>div.article-footer {
    border-top-color: rgba(105, 112, 122, 0.55);
    border-top-width: 1px;
    border-top-style: solid;
    padding-top: 10px;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    color: black;
}

section.section.header>div>nav>div.nav-left>a>h1 {
    font-weight: 100;
    font-size: 120%;
}

.content p {
    text-align: left;
}

.content blockquote {
    font-style: italic;
}

@media (prefers-color-scheme: dark) {

    html,
    body,
    section {
        font-family: monospace;
        color: white;
        background-color: #29303a;
    }

    .nav,
    .section {
        background-color: #29303a;
    }

    .content h1,
    .content h2,
    .content h3,
    .content h4,
    .content h5,
    .content h6 {
        color: white;
    }

    .title {
        color: #f8f8f9;
    }

    strong,
    a:hover {
        color: #f8f8f9;
    }

    a {
        color: #2582eb;
    }

    body>section>div>article>div.article-footer {
        border-top-color: #69707a;
        border-top-width: 1px;
        border-top-style: solid;
    }

    .content blockquote {
        background-color: #69707a;
    }

    code {
        background-color: #69707a;
    }

    .footer a {
        color: #2582eb;
    }

    .footer a:visited {
        color: #2582eb;
    }

    .footer a:hover, .footer a:link:hover, .footer a:visited:hover  {
        color: #f8f8f9;
    }
}

section.header {
    padding-top: 20px;
    padding-bottom: 20px;
}

.main-video,
.main-image {
    max-width: 100%;
    max-height: 660px;
    padding-bottom: 10px;
}