html,
button,
input,
select,
textarea,
.pure-g [class *= "pure-u"] {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #434E54;
}

a:link, a:visited {
  color: #708FA1;
}

a:active, a:hover {
  color: #A3A250;
}

#header,
#main,
#footer {
  width: 88%;
  max-width: 54em;
  margin: 0 auto 1em auto;
}

#footer li {
  font-size: 0.8em;
  color: #887;
  display: inline-block;
}

#footer ul {
  list-style-type: none;
  padding: 0;
}



#footer li:after {
  content: "\00a0|";
}


h1,
h2,
h3,
h4 {
  font-family: "Crimson Text";
  font-weight: normal;
}

#header h1 {
  margin: 0;
}

h1.title-sub {
  color: #708FA1;
}

.article {
  margin-bottom: 2em;
  padding-bottom: 3em;
  border-bottom: 1px dotted #ddc;
}

.debug {
  border: 1px dotted black;
}

/*
 * media queries
*/

@media screen and (min-width: 35.5em) {
}

@media screen and (min-width: 48em) {
  #header,
  #main,
  #footer {
    width: 88%;
    max-width: 54em;
    margin: 0 auto 2.4em auto;
  }
  
  #header h1 {
    display: inline-block;
  }
  
  .title-sub {
      padding-left: 0.1em;
}

  .article_list {
    margin: 0 0 1em 0;
    padding: 0 2.4rem 0 0;
    text-align: right;
  }

  #main img {
    margin-top: 0.4em;
  }
}

@media screen and (min-width: 64em) {
}

@media screen and (min-width: 80em) {
}