body{
  max-width: 80ch;
  margin: auto;
  padding: 2em 4ch;
}

/* type */
body, code, pre{
  font-family: 'SF Mono', 'Inconsolata', 'Menlo', monospace;
  font-size: 18px;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
}

h1{
  font-size: 1em;
}

/* header */
header{
  margin-bottom: 4em;
}

header h1{
  text-align: center;
  font-weight: normal;
}

header h1 span{
  display: none;
}

header pre{
  margin: auto;
  width: 61ch;
  line-height: 1em;
}

@media (max-width: 100ch){
  header pre{
    display: none;
  }

  header h1 span{
    display: inline;
  }
}

/* article */
article{
  margin-top: 5em;
}
article h1:after, article date:before{
  display: block;
  content: '--------------------------------------------------------------------------------';
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
}


article h1{
  display: inline;
  font-weight: bold;
}

article img{
  display: block;
  width: 100%;
  margin-bottom: -2em;
}

article pre{
  padding-left: 4ch;
}

article ul{
  padding: 0;
}

article ul li{
  list-style: none;
}

article ul li:before{
  content: '* ';
  float:left;
}

article ul li p{
  padding-left: 2ch;
}

/* color */

body{
  color: #292C36;
}

article pre{
  color: #fff;
  background-color: #292C36;
  padding: 1em;
}

*:after, *:before{
  color: #A4A9BA;
}