.page {
  max-width: 800px;
  font-size: calc(12px + 0.5vw);
}

@media screen and (min-width: 800px) {
  .page {
    font-size: 16px;
  }
}

article {
  margin: 1em 0 2em;
}

article h1,
article h2,
article h3,
article h4,
article h5 {
  background-size: auto 1em;
  line-height: 1.2em;
  margin: 1em 0 0.6em 0;
}

article h1 {
  background-image: url("../img/h1.png");
  font-size: 2.0em;
  border-bottom: 6px double #FC0;
  padding-left: 2.5em;
}

article h2 {
  background-image: url("../img/h2.png");
  font-size: 1.6em;
  padding-left: 1.5em;
}

article h3 {
  background-image: url("../img/h3.png");
  font-size: 1.4em;
  padding-left: 1.5em;
}

article h4 {
  background-image: url("../img/h4.png");
  font-size: 1.2em;
  padding-left: 1.5em;
}

article h5 {
  background-image: url("../img/h5.png");
  font-size: 1.0em;
  padding-left: 1.5em;
}

article hr {
  height: 1px;
  border: none;
  border-top: 4px dotted #FC0;
  margin: 2em 0;
}