html {
  /* layout */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  
  min-height: 100%;
  
  background-color: lightskyblue;
  color: white;
  
  /* "1em" isn't quite big enough; neither is 1.1em */
  font-size: 1.2em;

  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;
}

body {padding-left: 0.9em; padding-right: 0.8em}

h1 {
  font-size: 280%;
}

h2 {
  font-size: 210%;
}

h3 {
  font-size: 170%;
}

a {text-decoration: none}

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

h3 a:visited {
  color: #204FE8;
  margin: 0.5em;
}

h1, h3 {
  inline-size: 85vw;
  margin: 0.2em auto;
  overflow-wrap: break-word
}

h1 a:link {
  color: white;
}

div#align-h3s {
text-align: left;
margin: auto;
width: auto;
}

p, div#bible-passages-column > p {margin: 1em auto 1em auto; max-width: 36em}

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

hr {background-color: white; width: 30em; height: 0.25em; max-width: 85vw; 
    border: 0.25em solid white;
    border-radius: 0.125em;
    margin: 1.5em auto;
}