body {
  background-color: #f4f1e8;
  background-image:
    radial-gradient(circle at 25% 35%, rgba(0,0,0,.015) 1px, transparent 1px),
    radial-gradient(circle at 75% 15%, rgba(0,0,0,.015) 1px, transparent 1px),
    radial-gradient(circle at 45% 85%, rgba(0,0,0,.015) 1px, transparent 1px),
    radial-gradient(circle at 95% 65%, rgba(0,0,0,.015) 1px, transparent 1px),
    radial-gradient(circle at 15% 95%, rgba(0,0,0,.015) 1px, transparent 1px);
  background-size: 4px 4px, 5px 5px, 3px 3px, 6px 6px, 4px 4px;
  background-position: 0 0, 2px 2px, 1px 3px, 3px 1px, 2px 4px;
  color: #222222;
  font-family: 'Lora', serif;
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  box-sizing: border-box;
}
@media all and (min-width: 760px) {
  body {
    padding: 20px;
  }
}
h1, h2 {
  font-family: 'Lora', serif;
  font-weight: 700;
  margin: 40px 0 20px 0;
  line-height: 1.2;
}
h1 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 2.5rem;
}
h2 {
  font-size: 2rem;
}
h1 a {
  color: inherit;
  text-decoration: none;
}
p.intro {
  margin: 5px 0 8px 0;
}
footer {
  margin: 15px 0 10px 0;
  font-size: smaller;
  color: #555555;
  text-align: center;
  line-height: 1.3;
}
footer p {
  margin: 5px 0;
}
@media (min-width: 760px) {
  footer {
    margin: 30px 0;
    line-height: 1.5;
  }
  footer p {
    margin: 8px 0;
  }
}
#app-container {
  margin: 0 0 20px 0;
  min-height: 100px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media (min-width: 760px) {
  #app-container {
    min-height: 300px;
  }
}