body {
  text-rendering: optimizeLegibility;

  /* Whatever font that actually is, it will work for me. */
  font-family: serif;

  /* Increase line-height from the default. */
  line-height: 1.35;

  color: #111;
  background: #fff;

  padding: 20px;
  margin: 0;

  /* Don't have content run too wide, because of the lines,
     that would look very line-y... */
  max-width: 740px;
}

p {
  /* Reduced width (but not for list content, as that are "just"
     facts) for better readibility of flowed lenghty text. */
  max-width: 600px;
  hyphens: auto;
}

/* The default styles, push lists way too
   wide into the content. */
ul {
  padding-left: 30px;
}
li {
  margin-bottom: .25em;
}

/* Don't put too much emphasis on headings, we use them often. */
h1 {
  text-transform: uppercase;
  font-weight: normal;
  font-size: 20px;
}
h2 {
  font-weight: normal;
  font-size: 20px;
}

body > header {
  margin-bottom: 10px;
}

/* This is a special heading. */
body > header h1 {
  margin-top: 0;
  margin-bottom: 30px;
  font-size: 32px;
}

section > h1 {
  /* The sections already come with their own top spacing. */
  margin-top: 0;
}
section {
  /* Have the line between sections in equal distances from the content. */
  margin-bottom: 40px;
}
section + section {
  border-top: 1px solid blue;
  padding: 30px 40px 0 0;
}

body > footer {
  padding-top: 60px;
  border-top: 1px dashed blue;
}