html {
  /* layout */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  
  min-height: 100%; /* a few people have suggested this, although they often suggest "height", rather than "min-height" */
  
  background-color: lightgreen;
  color: white;
  
  /* "1em" isn't quite big enough */
  font-size: 1.115em;

  line-height: 1.5;
  text-align: center;
}

html > body {
    margin: 0;
    top: 0;
    bottom: 0;
}

body {
  position: relative;
  text-align: center;
  flex-grow: 1;
  min-height: 100vh; /* some say this should be "min-height: 100%" */
}

p {
  max-width: 38em;
  margin: 1em auto 1em auto;
}

h1 {
  font-size: 350%;
}

h2 {
  font-size: 250%;
}

h3 {
  font-size: 200%;
}

body img {
  max-width: 94vw;
  display: block;
  margin: 1.7em auto 1.7em auto;
}

img{
  border-radius: 0.7em;
  box-shadow: 5px 10px 5px darkgray;
}

a {text-decoration: none}

hr { width: 32em; width: 32rem; height: 0.6em; height: 0.6rem; background: white; margin: 2.8rem auto; max-width: 94vw; border: none; border-radius: 0.5em}

footer {text-align: center;margin-left: auto; margin-right: auto; margin-bottom: .5em; margin-bottom: .5rem}

small { text-align: center; margin-left: auto; margin-right: auto; font-size: 0.8em; font-size: 0.8rem}

a:link {
  color: white;
}

a:visited {
  color: white;
}

a:hover {
  color: white;
  border-bottom: dotted 0.08em
}

a:active {
  color: white;
}

h1 a:visited {
  color: white;
}

h3 a:visited {
  color: white;
}

iframe {
  border: none;
  border: 0;
  max-width: 94vw;
  margin: 0;
}