@import url(https://fonts.googleapis.com/css?family=PT+Serif|PT+Serif:b|PT+Serif:i|PT+Sans|PT+Sans:b|Inconsolata);

@media (max-device-width: 700px) {
    main {
        width: 90%;
    }
}

@media (min-device-width: 700px) {
    main {
        width: 650px;
    }
}

body {
    background: #fcfcfa;
    color: #333;
    font-family: "PT Sans", sans-serif;
    margin: 0;
}

main {
    margin: 1em auto 4em auto;
    position: relative;
}

#topbar {
  top: 0;
  left: 0;
  width: 100%;
  background-color: chartreuse;
  position:fixed;
  z-index: 1;
}

h1, h2, h3, h4 {
    color: #000;
}

h1, h2 {
    font-weight: 300;
    letter-spacing: -1px;
    margin: .3em 0 .1em 0;
    text-rendering: optimizeLegibility;
}

header, footer {
    color: #636363;
}

h2 a[name], h2 a[id] {
    color: #ccc;
    right: 100%;
    padding: 0 .3em;
    position: absolute;
}

header, footer {
    font-size: small;
}

header a, footer a {
    float: left;
    margin-right: .5em;
}

header aside:before, footer aside:before {
    padding-right: .5em;
    content: "/";
}

footer {
    margin-top: 8em;
}

h1 ~ aside {
    width: 180px;
    font-size: small;
    right: -240px;
    position: absolute;
}

.attribution {
    font-size: small;
    margin-bottom: 2em;
}

main > p, li > p {
    line-height: 1.4em;
    text-align: justify;
    text-justify: auto;
}

li > p {
    margin: 0 1em 0.6em auto;
}

a {
    color: orangered;
}

header a:not(:hover), footer a:not(:hover) {
    text-decoration: none;
}

p a {
    text-underline-offset: 1px;
}

pre, code, textarea {
    font-family: "Inconsolata", monospace;
}

code {
    line-height: 1.3em;
}

textarea {
    font-size: 100%;
}

main > pre {
    border-left: solid 2px #ccc;
    padding-left: 18px;
    padding-top: 0;
    margin: 0 0 0 10px;
}

p code {
    background: #e7e7e7;
    border-radius: 4px;
    padding: 0.125rem 0.25rem;
    margin: 0 0.05rem;
}

svg {
    font: 10px sans-serif;
}

sup, sub {
    line-height: 0;
}

blockquote {
    margin-left: 20px;
}

blockquote q {
    font-style: oblique;
    font-size: small;
}

/* Override some HighlightJS  styles. */

.hljs {
    background: none;
}

pre code.hljs {
    padding: 0;
}