body {
  color: #000;
  background: #FFF;

  max-width: 30em;
  margin: 6em 3em 6em 6em;

  font-family: sans-serif;
  font-style: normal;
  font-size: 11pt;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 1em;
}

p {
  margin-top: 0.5em;
  margin-bottom: 0;
  text-align: left;
  hyphenate: auto;
  hyphenate-before:2;
  hyphenate-after:3;
}

/* all paragraphs that are proceeded by another paragraph. tiny paragraphs don't
 * count */
p:not(.tiny) + p, figure + p {
  margin-top: 0;
  text-indent: 1.5em;
}

p.tiny, #bottom {
  margin-top: 1em;
  1argin-bottom: 1em;
  text-indent: 0;
  color: #CCC;
}

img {
  width: 100%;
}

figcaption {
  margin-top: 0.5em;
}

figure {
  margin: 1.5em 8em;
  padding: 2em 0;
  max-width: 600px;
}

@media (max-width: 700px) {
	figure {
		margin: 1.5em 0;
	}
}

pre {
  margin: 1em 2em;
}

pre code {
    background: none;
    font-size: 1em;
}

code {
  background: rgba(0, 0, 0, 0.05);
  padding: .2em;
  font-size: .8em;
}

a {
  color: #268bd2;
  text-decoration: none;
}

a:hover {
  color: #1a6192;
}

#header, header {
  float: left;
  width: 100%;
  line-height: 1.3;
  padding-bottom: 4em;
}

#header h1, header h1 {
  padding: 50px 0 0 0;
  margin: 0;
}

#header h2, header h2 {
  margin: 0;
  color: #CCC;
}