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: lightskyblue;
  color: white;
  
  /* "1em" isn't quite big enough */
  font-size: 1.115em;
  line-height: 1.5;
}

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

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

a:link, a, a:hover {
    color: white;
}

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

h1 {
    font-size: 300%;
}

h2 {
    font-size: 200%;
}

h3 {
    font-size: 150%;
}

a {text-decoration: none}

table, tbody, tr, td { border-collapse: collapse; border-spacing: 0}

address {text-align: center; margin-left: auto; margin-right: auto}

hr { width: 31em; width: 31rem; height:.09em; height:.09rem; background-color: #585858; margin: 2em auto}

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: white
}

a:visited {
    color: white
}

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

a:active {
    color: green
}

h1 a:visited {
    color: white
}

h3 a:visited {
    color: white
}

iframe, h1, h2, h3, p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

iframe {
    max-width: calc(100vw - 0.425rem);
}

hr {
    max-width: calc(100vw - 0.425rem);
}