html {
    font-family: sans-serif;
    background: #fff;
}

body {
    box-sizing: border-box;
    margin: 0;
    background: inherit;

}

nav {
    position: relative;
    z-index: 1;
    border-top: 5px solid #f2c665;
    box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}

nav ul {
    display: flex;
    justify-content: flex-end;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0;
}

nav li {
    list-style-type: none;
    background: #fff;
    border-right: 1px solid #f0f0f0;
    transition-property: background-color;
    transition-duration: 250ms;
}

nav li:first-child {
    border-left: 1px solid #f0f0f0;
}

nav a {
    display: block;
    margin-right: -1px;
    padding: 1em 1.25em;
    font-size: 1.25em;
    text-decoration: none;
    color: #000;
}

nav li:hover {
    background-color: #f9f9f9;
}

header {
    overflow: hidden;
    background: #a800a8;
}

aside {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 300px;
    padding: 40px;
    background: #f9f9f9;
}

body > header h1, article, body > header:after {
    box-sizing: border-box;
    max-width: 1024px;
    margin: 1em auto;
}

body > header h1, article > div > h1, article > div > p, section, body > header:after {
    padding: 0 40px;
}

body > header h1 {
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    padding: 40px;
}

body > header:after {
    content: "";
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    height: 60px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}

article {
    display: flex;
    flex-direction: row-reverse;
    margin-top: -60px;
    margin-bottom: 0;
    background: inherit;
}

article > div {
    width: 724px;
}

article a {
    color: #a800a8;
    text-decoration: none;
}

article a:hover {
    color: #700070;
    text-decoration: underline;
}

article li {
    padding: .25em 0 .125em;
}

article ol {
    padding-left: 1.5em;
}

article ul {
    padding-left: 1.125em;
}

/* These styles are just one big random hack. */
article ol ol, article ul ul, article ol ul, article ul ol {
    padding-top: .125em;
}

article ol, ul {
    list-style-type: none;
}

article ol {
    counter-reset: section;
}

article li:before {
    display: inline-block;
    width: 1.5em;
    margin-left: -1.5em;
    color: #808080;
}

article ol > li:before {
    counter-increment: section;
    content: counters(section, ".") ". ";
    font-size: .9rem;
}

article ol ol {
    padding-left: 2.125em;
}

article ol > li ol > li:before {
    content: counters(section, ".") "  ";
    width: 2.125em;
    margin-left: -2.125em;
}

article ul > li:before {
    content: "\2022";
    width: 1em;
    margin-left: -1em;
}

section {
    padding-top: 1em;
}

section li p:last-child {
    margin-bottom: 0;
}

section:last-child {
    padding-bottom: 1em;
}

aside label, aside .label {
    display: flex;
    margin-bottom: .5em;
}

aside label span, aside .label span {
    flex-grow: 1;
    font-weight: bold;
}

aside h1 {
    margin-top: 2em;
    margin-bottom: -.5em;
}

.highlighter {
    position: relative;
}

.highlighter:after {
    content: "";
    position: absolute;
    top: 0;
    left: -.5em;
    right: -.5em;
    height: 100%;
    transform: rotate(-.125deg);
    background: yellow;
    opacity: .35;
}

.code {
    white-space: pre-wrap;
}

.code.scroll {
    box-sizing: border-box;
    width: 724px;
    overflow: auto;
    white-space: pre;
}

.code + .code {
    margin-top: 1em;
}

.code, .notice {
    margin: 0 -40px;
    padding: .75em 40px;
    background: #f5f5f5;
}

.notice {
    background: #d6e8ff;
}

/* If I don't, then stuff gets weird. Didn't think I had to, but something odd with flexbox handling I guess? */
@media (max-width: 1024px) {

    article > div, .code.scroll {
        width: calc(100vw - 300px);
    }
}