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

body {
    background-color: #fff;

    font-size: 0;
    line-height: 0;

    &.tiny-toggle-active {
        background: #fff;
    }
}

header.course-nav {
    background: transparent;
    display: inline-block;
    width: auto;

    * {
        font-size: 14px;
        line-height: 1;

        @media (orientation: landscape) {
            font-size: 2vmin !important;
        }
    }

    ul {
        flex-direction: column;
    }

    nav a {
        background: #e1e1e1;
    }

    nav a:hover,
    nav a.router-link-active,
    nav a.is-parent-link {
        background-color: yellow;
        color: black;
    }
}

.content {
    background-color: rgb(225, 225, 225);
    border-radius: 4vmin;
    box-sizing: border-box;
    color: blue;
    font-family: 'ABC Areal', Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.2;
    padding: 0.75em;

    @media (orientation: landscape) {
        font-size: 2.5vmin;
        height: 65vmin;
        left: 50vw;
        overflow: scroll;
        position: fixed;
        top: 50vh;
        transform: translate(-50%, -50%);
        width: 65vmin;
    }

    scrollbar-width: none;
    &::-webkit-scrollbar {
        display: none;
    }

    &.h-max-h1 h1,
    &.h-max-h1 .h1 {
        margin-bottom: 1.2em;
        position: sticky;
        text-align: center;
        top: 0;
    }

    &.h-max-h1 h2,
    &.h-max-h1 .h2,
    &.h-max-h3 h3,
    &.h-max-h3 .h3 {
        padding-bottom: 1.2em;
        text-align: center;
    }

    code,
    p, ul, ol {
        padding-bottom: 1.2em;
    }

    ol li, ul li {
        margin-left: 1em;
    }

    ol li {
        list-style: decimal;
    }

    ul li {
        list-style: square;
    }

    a {
        color: black;
        font-family: 'Times New Roman', Times, serif;
        text-decoration: underline;

        &:hover {
            background-color: yellow;
            color: rgb(32, 32, 32);
            text-decoration: none;
        }
    }
}