@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lora/v32/0QI6MX1D_JOuGQbT0gvTJPa787weuyJG.ttf) format('truetype');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lora/v32/0QI6MX1D_JOuGQbT0gvTJPa787zAvCJG.ttf) format('truetype');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v18/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32KxfXNig.ttf) format('truetype');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v18/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K3vXNig.ttf) format('truetype');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v18/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K67QNig.ttf) format('truetype');
}
:root {
  --color-main: #000000;
  --color-accent: #cfcfcf;
  --color-contrast: #000000;
  --color-body: #e2e2e2;
  --color-bkgd: #f8f8f8;
  --color-soft: #bbbbbb;
}
[data-theme="dark"] {
  --color-main: #c7c7c7;
  --color-accent: #343434;
  --color-contrast: #ffffff;
  --color-body: #101010;
  --color-bkgd: #000000;
  --color-soft: #636363;
}
ul {
  display: none;
  z-index: 10;
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  position: fixed;
  height:100%;
 margin:auto; right:0; left:0; top:50px;

  background-color: var(--color-bkgd);
  text-align: left;
  overflow-y: scroll;
  width: 100%;
  max-width: 740px;
  text-align:center;
  padding: 10px;
  z-index:900;

}
ul li.bookitem {
  display: block;
  font-family: "Work Sans", sans-serif;
  font-weight: 300;
  font-size: 20px;
  position: relative;
  border-bottom: 0px solid var(--color-accent);
  cursor: pointer;
  padding: 15px 0 5px;
  color: var(--color-main);
  transition: 0.2s ease;
}
ul li.bookitem:hover {
  border-bottom: 0px solid var(--color-main);
  color: var(--color-contrast);
}
ul li.chapteritem {
  display: inline-block;
  font-weight: 370;
  text-align: center;
  position: relative;
  width: 60px;
  height: 45px;
  margin: 2px;
  line-height:32px;
  padding-top: 15px;
  border: 1px solid var(--color-accent);
  cursor: pointer;
  background: var(--color-bkgd);
  transition: 0.2s ease;
}
ul li.chapteritem:hover {
  background-color: var(--color-accent);
}

button.dismiss {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  border: none;
background-color: var(--color-bkgd);
  color:gray;
  font-size: 26px;
  padding: 8px 0 6px;
  cursor: pointer;
  z-index: 20;
  transition: background 0.2s ease;
}

menu {
  width: 100%;
  display: inline-block;
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  margin-bottom: -18px;
}
menu .darkswitch {
  
  position:absolute; margin:auto; right:0; left:0; top:-20px;
  
display: block;
  height: 9px;
  position: relative;
  width: 9px;
  
}
menu .darkswitch .sun {
  position: absolute;
  left: -6px;
  top: -6px;
  font-size: 21px;
  z-index: 1;
  color: var(--color-soft);
}
menu .darkswitch input {
  display: none;
}
menu .darkswitch .slider {
  background: var(--color-soft);
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.2s ease;
  border-radius: 30px;
  z-index: 2;
}
menu .darkswitch .slider:before {
  top: -3px;
  content: "";
  height: 15px;
  left: -20px;
  position: absolute;
  transition: 0.2s ease;
  width: 15px;
  border-radius: 30px;
  background: var(--color-bkgd);
  z-index: 3;
}
menu .darkswitch input:checked + .slider {
  transform: scale(2.2);
}
menu .darkswitch input:checked + .slider:before {
  transform: translateX(14px) scale(0.5);
}
.nextprev-btn {
  background: transparent;
  border: none;
  position: fixed;
  top: 122px;
  color: var(--color-soft);
  font-size: 24px;
}
.nextprev-btn#prevch {
  left: 10px;
}
.nextprev-btn#nextch {
  right: 10px;
}

*{
	
 font-weight: 300;	
	
}
body {
  background-color: var(--color-bkgd);
  transition: 0.2s ease;
   font-weight: 300;
}

#container {
 position:absolute;
 margin:auto;

 top:0;
 left:0;
 right:0;
 bottom:0;
 
 text-align:left;
 
  width:100%;
  height:100%;
  max-width: 500px;
    overflow-x:hidden;	
  padding:0px;
  background-color: var(--color-bkgd);
  font-size: 16px;

  color: var(--color-main);
  font-family: "Work Sans", sans-serif;
  font-weight: 300;
  transition: 0.2s ease;
  padding-bottom:100px;
}
#container article .centerwrap {

  position:absolute; margin:auto; right:0; left:0; top:0px;
  width:300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#container article h1 {
  font-family: "Lora";
  font-size: 2.5em;
  background-color: transparent;
  padding: 0 0.3em;
  line-height: 2em;
  border-bottom: 1px solid var(--color-main);
  margin: 1em 0 0;
  cursor: pointer;
  transition: 0.2s ease;
}
#container article h1:hover {
  background-color: var(--color-accent);
  color: var(--color-contrast);
  border-bottom: 0px solid var(--color-contrast);
}
#container article h2 {
  font-family: "Work Sans";
  font-size: 1.5em;
  font-weight: 700;
  color: var(--color-main);
  padding: 0 18px;
  line-height: 2em;
  cursor: pointer;
  transition: 0.2s ease;
}
#container article h2:hover {
  background-color: var(--color-accent);
}

.nav{position:fixed; list-style-type:none;     font-family: "Work Sans", sans-serif;
  font-weight: 300;

font-size:12px;

position:fixed; margin:auto; background-color: var(--color-bkgd);
max-width:500px;
width:100%;height:35px; right:0; left:0; bottom:0px;border-top:1px solid #;padding:1px; z-index:100;}

.nav span.active{color:#f8f8f8;}

.nav span{height:auto;width:32%;overflow:hidden;display:inline-block;margin-top:0;text-align:center;
color:lightgray; cursor:pointer; padding-top:3px;padding-bottom:0;padding-left:0;padding-right:0;position:relative;
  font-family: "Work Sans", sans-serif; color:gray; line-height:32px;
  font-weight: 370;

}

.nav span:active{color:#f8f8f8;}

select{border:none; outline:0; text-transform:; background:#fff; }
.select{position:relative;height:47.5px;background:0 0;width:150px;text-align:center; font-family: "Work Sans", sans-serif;}
.select:after{content:'';position:absolute;top:0;width:0;height:0;right:10px;bottom:0;margin:auto;border-style:solid;
border-width:5px 5px 0 5px; border-color:#000 transparent transparent transparent;pointer-events:none}
.select:hover:after{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
.select:before{width:30px;position:absolute;top:1px;right:1px;bottom:1px;background:0 0;content:'';pointer-events:none}
.select:hover:before{background:0 0}
.select select{ font-size:13px;border:none;color:#000;font-family: "Work Sans", sans-serif;box-shadow:none;border-radius:0;background:0 0;height:100%;width:100%;cursor:pointer;
outline:0;padding-left:30px;border:1px solid transparent;-moz-appearance:none;-webkit-appearance:none}
.select select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}
.select select::-ms-expand{display:none}
.select select:focus{border-color:transparent}