html {
  background-color: #efefe5;
  min-width: 300px;
  height: 100%;
}
body {
  background-color: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
  font-family: arial, helvetical, verdana, sans-serif;
}
/* header styles ################################################################## */

header {
  position: relative;
  display: block;
  height: 50px;
}
h1 {
  font-size: 2rem;
  font-family: georgia, serif;
  font-style: italic;
  color: #999;
  text-align: right;
  padding-left: 40%;
  padding-bottom: 1rem;
}
h2 {
  font-size: 1rem;
  margin-top: 1rem;
  color: #777;
}
.navBtnLeft {
  position: absolute;
  top: 10px;
  left: 20px;
}
.navBtnRight {
  position: absolute;
  top: 10px;
  right: 20px;
}
.navBtnBottomRight {
  width: 100%;
  display: block;
  text-align: right;
}
.navBtnBottomRight .btn btn-secondary {
  position: relative;
  display: inline-block;
  float: right;
}
#myMenu {
 position: absolute;
 z-index: 999;
 top: auto;
 left: auto;
 height: auto;
 width: 100%;
 max-width: 400px;
 min-width: 340px;
 padding: 14px;
 background-color: rgba(253, 253, 253, .90);
 border-radius: 10px;
}
ul {
  list-style-type: none;
  padding-inline-start: 0;
}
li {
  font-size: 14px;
  padding: 3px 1rem 3px 0;
  line-height: 12px;
  margin-left: 1rem;
  text-indent: -1rem;
}
li a {
   color: #303f6f;
   text-indent: -1.5rem;
}
ul li {
  line-height: 1.3;
  padding-top: 5px;
}
.verse, .verse2, .prayer {
  padding-left: 5%;
  padding-right: 7%;
  font-family: georgia, serif;
  font-style: italic;
  margin-block-end: 0;
  text-align: left;
}
.prayer {
  text-align: justify;
}
.prayer, .verse2 {
  margin-block-end: 1rem;
}
.verse, .verse br, .verse2, .verse2 br { 

}
.author {
  font-family: georgia, serif;
  padding-top: 2px;
  padding-right: 15%;
  text-align: right;
  font-size: 0.85rem;
  font-weight: bold;
  
}
p {
  text-align: justify;
  line-height: 1.4;
}
p.v {
  padding-left: 10%; 
  text-indent: -5%; }
}
/* footer styles ################################################################## */
.pageBottom {
  display: inline-block;
  height: 100px;
  width: 100%
}
footer {
  position: fixed;
  bottom: 0;
  clear: both;
  height: 25px;
  background-color: #292929;
  width: 103%;
  padding: 7px auto;
  text-align: center;
  font-family: verdana, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: white;
}
#content {
  width: 90%;
  margin: 5%;
}
div.verse p, div.verse2 p {
  line-height: 1.2;
  padding-left: 10%;
  text-indent: -10%;
  margin-block-start: 0.1em;
  margin-block-end: 0.1em;
  text-align: left;
}
div.verse p.author {
  text-align: right;
  padding-bottom: 1rem;
  margin-block-start: 0.4em;
  margin-block-end: 0.2em;
}
@media only screen and (min-width: 1200px) {
  h1 { font-size: 2.75rem; }
  #content { width: 50%; margin: 5% 25%; }
}
@media only screen and (max-width: 1199.98px) {
  #content { width: 70%; margin: 5% 15%; }
}
@media only screen and (max-width: 991.98px) {
  h1 { padding-left: 20%;}
  #content { width: 80%; margin: 5% 10%; }
}
@media only screen and (max-width: 767.98px) {
  h1 { padding-left: 10%; }
  #content { width: 90%; margin: 5% 5%; }
}
@media only screen and (max-width: 700px) {
  h1 { padding-left: 0; }
  #content { width: 100%; margin: 5% 0; }
}
@media only screen and (max-width: 475.98px) {
  h2 { font-size: 0.85rem; }
  p, .prayer { text-align: left; }
  .verse , .verse2 { padding-left: 10%; padding-right: 10%; text-indent: -5%; font-size: 0.9rem; line-height: 1.2; }
  .verse , .verse2 { padding-left: 10%; padding-right: 10%; text-indent: -5%; font-size: 0.9rem; line-height: 1.2; }
  .prayer { font-size: 0.9rem; line-height: 1.2; }
}