body {
  font-family: sans-serif;
  font-size: 12pt;
  margin: 0;
  background-color: #FFFFFF;
}

@media screen and (width > 800px) {
  main {
    background-color: #FFFFC0;
  }
  article {
    width: 768px;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFFFFF;
  }
}

header {
  text-align: center;
}

header h1 {
  font-variant: small-caps;
  margin-bottom: 1px;
  color: #909090;
}
header p.tagline {
  font-size: large;
  margin-top: 1px;
  color: #909090;
}

article header {
  padding: 1px 12px;
  color: #FFFFFF;
  background-color: #A89080;
}
article header h2 {
  margin-bottom: 1px;
}
article header p.subheading {
  margin-top: 1px;
}
article header p.licence {
  font-size: small;
  color: #505050;
}

article section h3 {
  margin: 32px 12px 12px;
}
article section p {
  margin: 12px;
  text-indent: 24px;
  line-height: 1.5;
}
article section img.illustration {
  float: right;
  width: 45%;
  max-width: 300px;
  height: auto;
  aspect-ratio: auto;
  margin: 8px;
}

article footer {
  padding: 12px;
}
article footer p.licence {
  font-size: small;
  color: #707070;
}