/* Here be CSS */

@import url("../vendor/fontawesome/css/all.css");
@import url("./structure.css");
@import url("./style.css");
@import url("./media.css");

html {
    color: var(--foreground-color);
    background-color: var(--background-color);
}

body.page {
    box-sizing: border-box;
    font-size: 16px;
    max-width: 52em;
    color: var(--foreground-color);
    background-color: var(--background-color);
    padding-top: 0;
}

body.page header {
    font-size: 150%;
    background-position: center;
    background-color: var(--shade1);

    border-bottom: 1px solid var(--shade2);

    /* This sets the right and left margins to cancel out the body's margins. It's
  width is still the same, but the background stretches across the page's width.
  */

    margin-top: 0;
    margin-bottom: 1em;

    padding-top: 1em;
    padding-bottom: 1em;

    margin-left: calc(0px - (50vw - 50%));
    margin-right: calc(0px - (50vw - 50%));
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
}

body.page header p.subtitle {
    font-size: 80%
}

body.page header div.author p,
body.page header p.author {
    font-size: 70%
}

code {
    font-size: 100%;
}

pre>code {
    font-size: 90%;
}

figure {
    margin: 0;
}

p {
    word-wrap: normal;
}