@font-face {
    font-family: 'ABC Areal';
    src: url(../../fonts/areal/ABCArealVariable.ttf);
}

.content {
    font-family: 'ABC Areal', Arial, Helvetica, sans-serif;
    color: rgb(32, 32, 32);
}






header.course-nav {
    background: lightgray;
    color: black;
    z-index: 99999;

    .course-title {
        background-color: #e6e6e6;
        color: black;
    }

    nav a.is-parent-link,
    nav a.router-link-active,
    nav a.router-link-exact-active {
        background-color: white;
        color: red;
    }
}

.content {
    margin: 0 auto;
    width: 66%;

    @media (orientation: portrait) {
        font-size: 18px;
        margin: 0 5px;
        width: auto;
    }

    &.h-max-h1 h1,
    &.h-max-h1 .h1 {
        color: lightgray;
        font-size: 1.5em;
        font-size: 4.5em;
        margin: 0.25em 0 0.15em 0;
        pointer-events: none;

        @media (orientation: portrait) {
            position: static;
            width: auto;
            font-size: 2.5em;
        }
    }

    h2, .h2,
    p, ul,
    code {
        margin-bottom: 1.15em;
    }

    &:not(.process-page).h-max-h1 h2,
    &:not(.process-page).h-max-h1 .h2,
    &:not(.process-page).h-max-h3 h3,
    &:not(.process-page).h-max-h3 .h3 {
        /* background-color: #fff; */
        box-shadow: inset 0 0 0.5em color-mix(in srgb, currentColor 25%, transparent);
        border-radius: 2em;
        /* color: rgb(65, 65, 65); */
        color: black;
        margin-top: 3em;
            margin-top: 6em;
        padding: 0.5em 1em;
        text-align: center;

        @media (orientation: landscape) {
            margin-left: -1em;
            margin-right: -1em;
        }
    }

    &.h-max-h1 h3,
    &.h-max-h1 .h3 {
        opacity: 0.35;
    }

    p {
        /* text-indent: 1.15em; */
    }

    li {
        margin-left: 1.15em;
        list-style: square;
    }

    a {
        background-color: #ffffa5;
        text-decoration: none;

        &:hover {
            background-color: transparent;
        }
    }

    code {
        background-color: #666;
        box-shadow: inset 0 0 1em #444;
        color: #eee;
        overflow: auto;
        padding: 1em 0.5em;
    }

    summary:hover {
        background-color: pink;
        cursor: pointer;
    }

    details[open] {
        background-color: #ffe6eb;

        summary {
            background-color: pink;
        }

        li {
            list-style: circle;
            padding: 0.25em 0;
        }
    }

    .prompt {
        background-color: #fff;
        border-radius: 2em;
        box-shadow: inset 0 0 0.5em color-mix(in srgb, currentColor 25%, transparent);
        color: rgb(65, 65, 65);
        font-size: 1.4em;
        font-weight: normal;
        padding: 1em 2em;
        text-align: center;

        @media (orientation: portrait) {
            font-size: 1.2em;
            margin-top: 0.5em;
        }
    }

    .image {

        &.half {
            margin-left: auto;
            margin-right: auto;
            max-width: 50%;

            @media (orientation: portrait) {
                max-width: 100%;
            }
        }

        &.two-third {
            margin-left: auto;
            margin-right: auto;
            max-width: calc(2 / 3 * 100%);

            @media (orientation: portrait) {
                max-width: 100%;
            }
        }

        &.rounded img {
            border-radius: 2em;
        }

        &.box-shadow {
            /* box-shadow: 0 0 0.5em color-mix(in srgb, currentColor 25%, transparent); */

            .caption, img {
                box-shadow: 0 0 0.5em color-mix(in srgb, currentColor 25%, transparent);
            }

            .caption {
                border-radius: 2em;
                padding: 0.5em;
            }
        }

        .caption {
            display: block;
            font-family: 'Space Grotesk';
            font-size: 0.5em;
            font-weight: normal;
            text-align: center;
        }
    }

    &.process-page {
        @media (orientation: landscape) {
            margin: 0;
            width: 100%;
        }

        .posts {
            @media (orientation: landscape) {
                display: grid;
                grid-template-columns: repeat(15, 1fr);
            }
        }

        .post {
            margin-top: calc(1.15em * 1);

            @media (orientation: landscape) {
                padding: 1em;
                border-radius: 2em;
                box-shadow: inset 0 0 1em #ff008f;
                grid-column: 1 / 10;
                margin: 0;

                &:nth-last-child(2) {
                    box-shadow: inset 0 0 1em silver;
                    grid-column: 2 / 11;
                }

                &:nth-last-child(3) {
                    box-shadow: inset 0 0 1em blue;
                    grid-column: 3 / 12;
                }

                &:nth-last-child(4) {
                    box-shadow: inset 0 0 1em lime;
                    grid-column: 4 / 13;
                }

                &:nth-last-child(5) {
                    box-shadow: inset 0 0 1em pink;
                    grid-column: 5 / 14;
                }

                &:nth-last-child(6) {
                    box-shadow: inset 0 0 1em cyan;
                    grid-column: 6 / 15;
                }

                &:nth-last-child(7) {
                    box-shadow: inset 0 0 1em yellow;
                    grid-column: 7 / 16;
                }
            }

            h3 {
                border-top: none;
                margin-bottom: 1.15em;
                text-align: center;
            }
        }
    }
}