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

  line-height: 1.5;
  text-align: center;
  overflow-wrap: break-word
}

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: 320%;
}

h2 {
  font-size: 250%;
}

h3 {
  font-size: 200%;
}

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

a:active {
  color: green
}

h1 a:visited {
  color: white;
}

h3 a:visited {
  color: #204FE8
}

h1 a:link {
  color: white;
}

div#bible-passages-column {
text-align: left;
}

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

a:link {color: white;
background-color: gray; padding: 0.325em}

h1 a:hover, h2 a:hover, h3 a:hover, a:hover {
  color: blue;
  border-bottom: dotted 0.08em
}