body { font-family: sans-serif;
  font-size: 15px;
  line-height: 20px;
  max-width: 50em;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens:auto;
  -ms-hyphens:auto; }

h1, h2, h3, h4, h5, h6,
pre, code, blockquote, ol, ul,
ol ol, ul ul, ul ol, ol ul, li,
p, section, header, footer {
    float: none;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6,
pre, code, blockquote,
p, ul, ol, section, header, footer, .figure {
    margin-top: 20px;
    margin-bottom: 20px;
}
h1 { font-size: 1em; }
h2 { font-size: 1em; }
h3 { font-size: 1em; }
h4 { font-size: 1em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; }
h1::before { content: "# "; opacity: 0.5; }
h2::before { content: "## "; opacity: 0.5; }
h3::before { content: "### "; opacity: 0.5; }
h4::before { content: "#### "; opacity: 0.5; }
h5::before { content: "##### "; opacity: 0.5; }
h6::before { content: "###### "; opacity: 0.5; }
p { margin: 0; padding: 0; }
hr {
    position: relative;
    height: 20px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    border: 0;
    margin-bottom: 20px;
}
hr:after {
    content: "----------------------------------------------------------------------------------------------------";
    font-family: monospace;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
    line-height: 20px;
    width: 100%;
    word-wrap: break-word;
}
blockquote { margin-left: 0; }
pre::after,pre::before { content: "~~~~~~"; display: block; font-size: 1.25em; opacity: 0.3; }
code {
    font-family: "courrier new", monospace;
    background: #f2f2f2;
}
pre code { background: none; }
blockquote {
    position: relative;
    padding-left: 17px;
    padding-left: 2ch;
    overflow: hidden;
}
blockquote:after {
    content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
    white-space: pre;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
    line-height: 20px;
    opacity: 0.3;
}

li {
    position: relative;
    display: block;
    padding-left: 18px;
}
li:after {
    position: absolute;
    top: 0;
    left: 0;
}
ul > li:after {
    content: "▪";
    opacity: 0.2;
}
ol {
    counter-reset: ol;
}
ol > li:after {
    content: counter(ol) ".";
    counter-increment: ol;
}

/* colors */
a, a:visited { color: #008AFF; }
a:active, a:hover, a:focus { color: #0085a1; }

h1 { color: #6c71c4;}
h2 { color: #d33682;}
h3 { color: #dc322f;}
h4 { color: #cb4b16;}
h5 { color: #b58900;}
h6 { color: #859900;}

img { max-width: 100%;
      max-height: 800px;
      margin: 20px auto; }