html {
  overflow:hidden;
  height: 100vh;
}

body {
  /* Set the background image */
  background-image: url('images/TheKingsCrownsGamePlay.webp');

  /* Center and scale the image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  /* Ensure it covers even if there is scrolling */
  height: 100vh;
  margin: 0;
  padding: 0;

  overflow:hidden;
}

/* Use a pseudo-element for back layer with full size */
body::before {
  content:"";
  position:fixed; /* Stretch a fixed position to the whole screen */
  top:0; right:0; bottom:0; left:0; /* Covers the viewport */
  z-index: -1; /* Under the body content */
  background: inherit; /* Same background as body to act in unison */
}

#content {
  width:90%;
  height:100%;
  margin: 0 auto 0 auto;
  padding: 0 1em 5em 1em;
  font-family:sans-serif;
  background: rgba(255,255,255,0.9);
  overflow:auto;
  box-sizing: border-box;
}

@media only screen and (min-width: 1200px) {
  #content {
    width:60%;
  }  
}

pre {
  background-color:#F0E8D0;
  overflow:auto;
  padding:1em;
}

blockquote {
    border-left: solid 4px silver;
    padding-left: 1em;
    margin-left: 0;
}

img.flowleft {
   float:left;
   margin-right:1em;
}

h1 {
  font-size: 2em;
  font-weight:600;
}

h2 {
  font-size: 1.6em;
  font-weight:500;
}

h3 {
  font-size: 1.2em;
  font-weight:400;
}

a:link { 
  text-decoration: none;
  color:darkblue;
  font-weight:700;
} 
a:visited { 
  text-decoration: none;
  color:darkblue;
  font-weight:700;
} 
a:hover { 
  text-decoration: none;
  color:darkblue;
  cursor: pointer;
  font-weight:700;
} 
a:active { 
  text-decoration: none;
  color:darkblue;
  cursor: pointer;
  font-weight:700;
}

div.chapters {
  margin-left: 1em;
}

a.selected {
  color:#008000;  
}

#ToC>li {
  list-style-type: none;
  margin-left: 1em;
}