html {
    background: gray;
    box-shadow: inset 0 0 6vmax pink;
    color: pink;
    min-height: 100vh;
}

header.course-nav {
    nav {
        a {
            &:hover,
            &.router-link-active,
            &.is-parent-link {
                background: pink;
                color: black;
            }
        }
    }
}

.content {
    margin: 1em;

    @media (max-width: 800px) {
        border: none;
        font-size: 17px;
        margin: 0;
    }

    .block:first-of-type {
        padding-top: 1em !important;
    }

    &.h-max-h1 h1, &.h-max-h1 .h1,
    &.h-max-h3 h3, &.h-max-h3 .h3 {
        border-bottom: 1px solid;
        color: pink;
        font-family: serif;
        font-size: 6vw;
        font-style: italic;
        /* font-weight: normal; */
        margin: 0;
        padding: 0.15em 5px 5px;
        text-align: center;

        @media (max-width: 800px) {
            font-size: 34px;
        }
    }

    &.h-max-h1 h2, &.h-max-h1 .h2,
    &.h-max-h3 h4, &.h-max-h3 .h4 {
        /* border: 1px solid;
        border-radius: 1em;
        display: inline-block;
        margin-bottom: 0.5em;
        padding: 0.4em 0.5em; */

        background-color: pink;
        border-radius: 1em;
        color: gray;
        display: inline-block;
        font-family: Space Grotesk;
        font-size: 0.6em;
        font-weight: normal;
        letter-spacing: 0.05em;
        margin-bottom: 0.5em;
        padding: 0.6em 1em;
        text-transform: uppercase;
    }

    ul {
        list-style: disc;

        li {
            margin-left: 1em;                
        }
    }

    p, ul, ol {
        margin-bottom: 0;
        padding-bottom: 1.15em;
    }

    ul, ol {
        ul, ol {
            padding-bottom: 0;
        }
    }

    a:hover {
        background-color: orange;
        color: orange;
    }

    code {
        background-color: #eee;
        color: #000;
        margin-bottom: calc(1 / 0.85 * 1.15em);
        padding: 15px;
    }

    &.subpage {
        border: 1px solid;

        & > *:not(h1.h1) {
            padding: 0 10px;
        }

        .block {
            border-left: 1px solid;
            border-right: 1px solid;
            margin: 0 auto;
            width: 50%;

            @media (max-width: 800px) {
                border: none;
                width: 100%;
            }
        }

    }

    .posts {

        .post {
            /* font-size: 0.7em; */
            width: 50%;

            /* &:first-child {
                border-right-width: 2em;
            } */

            &:not(:first-child) {
                border-top: 1px solid;
            }

            &:nth-child(odd) {
                border-right: 1px solid;
            }

            &:nth-child(even) {
                border-left: 1px solid;
                margin-left: auto;
                margin-top: -1px;
                width: calc(50% + 1px);
            }

            @media (max-width: 800px) {
                border: none !important;
                font-size: 1em;
                margin: 0 !important;
                width: 100% !important;
            }

            .block {
                padding: 0 10px;
            }
        }
    }

}