body {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1em;
  font-family: sans-serif;
}

body > header {
  padding-bottom: 1em;
  margin-bottom: 1em;
}

body > footer {
  text-align: center;
  margin-top: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
}

article {
  padding-bottom: 1em;
  margin-bottom: 1em;
}

ul.article-details,
ul.article-comment-details {
  list-style-type: none;
  list-style-position: inside;
  padding-left: 0;
}

/* Thin black lines to mark transitions between sections */
body > header, article { border-bottom: 1px black solid; }
article:last-of-type { border-bottom: none; }
body > footer, nav.paginator { border-top: 1px black solid; }

/* Paginator navigation */

nav.paginator {
  text-align: center;
  padding-top: 1em;
}

/* Images */

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Hero-style article images */

div.article-image-container {
  position: relative;
  width: 100%;
  max-height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

img.article-image {
  width: 100%;
  height: auto;
  display: block;
}

div.article-image-container h2,
div.article-image-container h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  padding: 0.5em;
  background-color: #FFFFFFFF;
  outline-color: #FFFFFFCC;
  outline-width: 1em;
  outline-style: solid;
  text-align: center;
  margin: 0;
}

/* Figures */

figure {
    text-align: center;
}

figcaption {
  margin-top: 0.5em;
  font-style: italic;
}

/* Lists etc. */

dt, dd {
    display: inline;
    padding: 0;
    margin: 0;
}