* {
  padding: 0;
  margin: 0;
}

div {
  width: 100vw;
  height: auto;
  padding-bottom: 30rem;
  display: grid;
  align-content: center;
  justify-items: center;
}

/* @media (min-resolution: 400dpi) {
  html { /*!body/
    font-size: 96px;
    background-color: yellow;
  } 
} */

div.banner {
  padding-top: 1.5rem; /*not px*/
  padding-bottom: 1.5rem;
  font-size: 200%; /*not px*/
  font-weight: bold;
}

div.contents {
  align-content: center;
  justify-items: center;
}

div.contents h1 {
  font-size: 150%;
  padding: 0 1rem 1rem 1rem;
}

div.contents h2 {
  font-size: 120%;
  padding: 0 1rem 1rem 1rem;
}

div.contents h3 {
  font-size: 100%;
  padding: 0 1rem 1rem 1rem;
}

div.contents h4 {
  font-size: 100%;
  padding: 0 1rem 0.5rem 1rem;
  text-align: center;
}

div.contents p {
  max-width: 30rem;
  padding: 0 1rem 1rem 1rem;
  text-align: justify;
}

div.contents ul {
  max-width: 25rem;
  padding: 0 3rem 0 3rem;
  text-align: justify;
}

div.contents ol {
  max-width: 25rem;
  padding: 0 3rem 0 3rem;
  text-align: justify;
}

div.contents .flashcard {
  max-width: 20rem;
  padding: 0.5rem 3rem 1.5rem 3rem;
  text-align: center;
}