body {
  color: #eee;
  background: #222;
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 40em;
  padding: 0 1em;

  overflow-x: hidden; /* needed for header margin */
}

header {
  background: #333;
  display: grid;
  text-align: center;

  margin: 0 calc(0px - (50vw - 50%)) 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 1em 0 0.5em 0;
  padding: 1em 0 0 0;
  line-height: 1.2;
}

h2 + h3 {
  margin: .5em 0 0.5em 0;
  padding: .5em 0 0 0;
}

a {
  color: #9e9;
}

a:hover {
  color: #5e5;
}

a:active,
a:visited {
  color: #e99;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  text-decoration: none;
}

h1:hover a:empty:before,
h2:hover a:empty:before,
h3:hover a:empty:before,
h4:hover a:empty:before,
h5:hover a:empty:before,
h6:hover a:empty:before {
  content: "#";
  padding: 0 0.25em;
}

img {
  max-width: 100%;
}

pre,
blockquote {
  background: #333;
  border-left: medium solid #99e;
  padding: 2em 2em 2em 3em;
  margin: 0;
}

blockquote {
  font-style: italic;
}