div.chapter {
    padding: 10px 5%;
    /*padding-bottom: 40px;*/
    background-color: var(--darkerColor);
    color: white;

    & h1, & h2, & h3, & h4, & h5, & h6 {
        font-family: 'Cormorant Garamond',serif;
        margin: 0;
    }

    & h1 {
        text-align: center;
        font-size: 2.5em;
        padding: 10px 0px;
        margin-bottom: 20px;
        color: var(--accentColor);
    }
    & h2 {
        padding: 20px 0px;
        font-size: 1.8em;
    }
    & h3 {
        padding: 20px 0px;
        font-size: 1.5em;
        font-weight: normal;
    }
    & h4 {
        padding: 20px 0px;
        font-size: 1.4em;
        font-weight: normal;
    }
    & h3 em, & h4 em {
        font-weight: bold;
        font-style: normal;
    }
    & h5 {
        padding: 15px 0px;
        font-size: 1.3em;
        font-weight: normal;
    }
    & h6 {
        padding: 15px 0px;
        margin: 0;
        font-size: 1.2em;
        font-weight: normal;
    }
    & p {
        padding: 20px 0;
        margin: 0;
        line-height: 1.6em;
        text-align: justify;
    }
    & p em,
    & .emphasis em {
        font-weight: bold;
        font-style: normal;
    }
    & pre[class*=language-] {
        margin: 20px 0px;
        font-size: 14px;
        box-shadow: 0px 0px 5px var(--darkerColor);
    }

    & .marged {
        margin: 0px 40px;
        font-size: 0.9em;
    }
    & .highlight {
        color: var(--accentColor);
    }
    & .click-block {
        font-family: 'Cormorant Garamond',serif;
        text-align: center;
        font-size: 1.1em;
        background-color: #DDD;
        color: var(--darkerColor);
        padding: 5px 0px;
        box-shadow: 0px 1px 1px var(--darkerColor);
        cursor: pointer;
        transition: all 0.25s ease-in-out;

        &:hover {
            background-color: var(--accentColor);
            color: white;
        }
    }
    & div.emphasis {
        background: rgba(255, 240, 100, .4);
        border-left: 3px solid rgba(255, 200, 100, .7);
        border-bottom: 3px solid rgba(255, 200, 100, .7);
        padding: 10px;
        color: #222;
        & > pre { margin-bottom: 0px !important; }
    }
    & div.separate {
        border-bottom: 1px solid var(--accentColor);
        padding-bottom: 15px;
        margin-bottom: 20px;

        & a:hover { color: var(--accentColor); }
    }
    & div.framework-choice {
        margin-top: 30px;
        & a:hover {
            color: var(--accentColor);
        }
        & > div {
            background: var(--darkerColor);
            color: var(--lighterColor);
            border-bottom: 1px solid var(--lighterColor);
            padding-bottom: 20px;
            &, & > a { transition: all .25s ease-in-out; }
            & > a { margin-right: 20px; }
            & > * { display: inline-block; }
            & > a > img {
                width: 90px;
                height: 70px;
            }
            &:hover {
                & > a {
                    transform: scale(1.2);
                    filter: drop-shadow(0px 0px 1px #000);
                }
            }
        }
    }
}
