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: white;
  color: black;
  
  /* "1em" isn't quite big enough */
  font-size: 1.2em;

  /* The default is horrible so let's set line-height to 1.5 */
  line-height: 1.5;
}

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: 27em; width: 27rem; height:.09em; height:.09rem; background-color: #585858; margin: 2.8rem auto; max-width: 94vw;}

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: .75em; font-size: .75rem}

a:link {
  color: #204FE8;
}

a:visited {
  color: purple
}

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

a:active {
  color: green
}

h1 a:visited {
  color: #204FE8
}

h3 a:visited {
  color: #204FE8
}

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