html {

font-size: $html-font-size;
background-color: $bg-color;
color: $fg-color;

body {
    background-color: $bg-color;
    color: $fg-color;
    margin: $body-margin;
    font-size: $content-font-size;
    font-family: $content-font-family;
    line-height: $content-line-height;

    a {
        color: $link-color;
        text-underline-offset: $underline-offset;
    }

    abbr {
        text-underline-offset: $underline-offset;
    }

    a:hover {
        color: $link-hover-color;
    }

    a:active {
        color: $link-active-color;
    }

    a:visited {
        color: $link-visited-color;
    }

    h1, h2, h3 {
        line-height: 1.2
    }

    header, footer, nav {
        text-align: $content-alignment;

        h1 {
            font-size: $content-font-size;
            margin-bottom: 1rem;

            em {
                margin-left: .5rem;
                font-weight: normal;
            }
        }
    }

    header {
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: $border-thickness solid $fg-color;
    }

    footer {
        margin-top: 2rem;
        padding-top: 1rem;
        border-top: $border-thickness solid $fg-color;
    }

    nav {
        margin-top: 1.5rem;
        a {
            margin-right: .5rem;
            border: $border-thickness solid $link-color;
            border-radius: .5rem;
            padding: .5rem;
            text-decoration: none;
            display: inline-block;
        }

        a:last-child {
            margin-right: 0;
        }

        a:hover {
            border: $border-thickness solid $link-hover-color;
        }

        a:active {
            border: $border-thickness solid $link-active-color;
        }

        a:visited {
            border: $border-thickness solid $link-visited-color;
        }
    }

    main {
        margin: $content-margin;
                    max-width: $content-width;
                    padding: $content-padding;

        article {
            margin-left: 2rem;
        }

        nav {
            text-align: left;
        }
    }

    article {
        margin: $content-margin;
                    max-width: $content-width;
                    padding: $content-padding;

        header, footer {
            text-align: left;
            margin: 2rem auto;
        }

        section {
            margin: 2rem auto;
        }

        header {
            margin-bottom: 1rem;
            padding-bottom: 0;            
            border: none;
        }

        footer {
            border-top: $hr-border-thickness dashed $fg-color;
        }
    }

    main, article {
        h1 {
            font-size: $content-font-size * 2;
        }

        h2 {
            font-size: $content-font-size * 1.6;
        }

        h3 {
            font-size: $content-font-size * 1.2;
        }

        h4, h5, h6 {
            font-size: $content-font-size * 1.1;
        }
    }

    blockquote {
        font-size: $blockquote-font-size;
        margin: 2rem 4rem;
        padding: 0 1rem;
        border-left: $border-thickness solid $fg-color;

        cite {
            font-style: normal;
            font-weight: bold;
        }
    }

    figure {
        font-size: $blockquote-font-size;
        margin: 2rem 4rem;
        padding: 1rem;
        border: $border-thickness solid $fg-color;

        img {
            width: 100%;
        }

        figcaption {
            font-style: normal;
            font-weight: bold;
        }
    }

    dl {
        dt {
            font-size: 1.1rem;
            font-weight: bold;
        }

        dd {
            margin-bottom: 1.1rem;
        }
    }

    hr {
        border: $hr-border-thickness solid $fg-color;
    }

    table {
        margin: 2rem 0;
        border-collapse: collapse;
        border: $border-thickness solid $fg-color;
        th, td {
            padding: 1rem;
            border: $border-thickness solid $fg-color;
            text-align: left;
        }
    }

    pre, code {
        font-size: $preformatted-font-size;
        font-family: $preformatted-font-family;
    }
}

}