@font-face {
    font-family: 'Cherry Bomb One';
    src: url(../../fonts/cherry-bomb-one/CherryBombOne-Regular.ttf);
}

@font-face {
    font-family: Nunito;
    src: url(../../fonts/nunito/Nunito-VariableFont_wght.ttf);
}

@font-face {
    font-family: Nunito;
    font-style: italic;
    src: url(../../fonts/nunito/Nunito-Italic-VariableFont_wght.ttf);
}

html, body {
    background: #ffeaff;
    /* color: #9700ff; */
    color: tomato;
}

header.course-nav {
    background-color: #ffeaff;
    color: inherit;

    .btn-close-course a,
    .semester {
        color: #ff8e8e;
    }

    .course-title {
        background: #9700ff1c;
        color: #9700ff;
    }

    nav a {
        &:hover,
        &.router-link-active,
        &.is-parent-link {
            background: #fff;
            color: #9700ff;
        }
    }
}

.content {    
    font-family: Nunito;
    font-weight: normal;
    line-height: 1.3;
    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;
        font-family: 'Cherry Bomb One';
        font-size: 3em;
        font-weight: 800;
        line-height: 1.3;
        margin: 0;
        padding: 0 0.3em 0.2em 0.3em;
        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;
    }

    ul {
        list-style: disc;

        li {
            margin-left: 1em;                
        }
    }

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

    a {
        text-decoration-thickness: 2px;
    }

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

    &.subpage {
        border: 1px solid;
        border-radius: 1em;

        & > *: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 {
            border: 1px solid;
            border-radius: 1em;
            font-size: 0.7em;
            margin: 0 auto 1em auto;
            padding: 0.5em 1em;
            width: 50%;

            @media (max-width: 800px) {
                border: none;
                border-radius: 0;
                border-top: 1px solid;
                font-size: 1em;
                padding: 0;
                width: 100%;
            }

            h3 {
                border: none;
            }

            &:first-child h3::before,
            &:first-child h3::after {
                content: '✨';
                display: inline-block;
                font-size: 0.65em;
                position: relative;
                top: -0.15em;
            }

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

}