/*TRACTATUS AYYEW BOOKAPP VERSION 1.0

CSS Version 1.1
Original Author:  Russell Maier
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (https://www.gnu.org/licenses/gpl-2.0.html)
See full project repository at: https://github.com/russs95/earthbook
*/



/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
	0. Reference
  1. Page Layout
  2. Typography
	3. Top Navigation Bar
  4. User Settings Overlay Curtain 
	5. Share Overlay Curtain
  6. Buy Overlay Curtain
  7. Read Overlay Curtain
  8. Bookplate Overlay Curtain
  9. Search Overlay Curtain
  10. Landing Page Content 
  11. Chapter Footnote Section
  12. Footer Content
  13. Text Size Adjust Section
  14. Action buttons
  15. TABLE OF CONTENTS of Overlay Curtain
  16. What is an Earthbook Overlay Curtain
  17. Ecological Accounting Overlay Curtain
  18. Sepia, Contrast, Brightness Sliders




	5. 	BOTTOM Bookplate 
  6.  Main page content 
	6.	Footer
	7.      Forms
	8. 	Notifications
	9. 	Needs Review
	10.  	New



  /* -------------------------------------------------------------------------- */

/*	0. Reference

/* -------------------------------------------------------------------------- */

/*
    
Media Query parameters used throughout:

@media screen and (max-width: 700px) {
@media screen and (min-width: 700px) and (max-width: 1324px) {
@media screen and (min-width: 1325px)

@media (prefers-contrast) {
@media (prefers-color-scheme: dark) {

/* -------------------------------------------------------------------------- */

/*	1. Page Layout
/* -------------------------------------------------------------------------- */



:root {
  color-scheme: light dark;
 }

 html {
  overflow-x: hidden;
 }

body {
  color: var(--text-color);
  background-color: var(--background-color);
}


.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


 body {

  /*
  --duration: 0.5s;
  --timing: ease;*/
 
  color: var(--text-color);
  background-color: var(--background-color);
 
  /*transition:
  color var(--duration) var(--timing),
  background-color var(--duration) var(--timing);*/

  margin: 0px;
  position: absolute;
  z-index: 0;
  overflow-x: hidden; /*ARG WHY OVERFLOW?*/
  max-width: 100%;
  width: 100%;
 }

 #underlayer {   /*This enables sepia/contrast/brightness*/
  background-color: var(--background-color);
  margin: 0px;
  max-width: 100%;
  height: 100%;
}
 
@media screen and (max-width: 699px) {
  .no-mobile {
    display: none;
  }
}


 /*Full Page Layout System*/

 #main-page {
  margin: auto;
  box-sizing: border-box;
  padding-bottom: 180px;

}

@media screen and (max-width: 769px) {

  .desktop {
    display: none;
  }

  #landing-view-buy {
    height: 100vh;
  }

  .mobile {
    display: block;
  }

  #main-page {
      margin-left: 3%;
      margin-right: 3%;
      padding-top: 200px;
  }
}
@media screen and (min-width: 770px) and (max-width: 1324px) {

  .desktop {
    display: block;
  }

  .mobile {
    display: none;
  }


  #main-page {
      margin-left: 5%;
      margin-right: 5%;
      padding-top: 220px;
  }
}
@media screen and (min-width: 1325px) {

  .desktop {
    display: block;
  }

  .mobile {
    display: none;
  }

    #main-page {
      margin-left: 15%;
      margin-right: 15%;
      padding-top: 250px;
      overflow-x: hidden
  }
}


/* COLUMN DESIGN */

#row {  
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  width: 100%;
}

@media screen and (max-width: 700px) {
  #row {
    margin-top: -128px;
}
}

#main {
  overflow: hidden;
  transition: 0.4s;
  }


/* Main column */
  
@media screen and (max-width: 700px) {
#main {
  flex: 100%;
  padding: 12px;
}
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
#main {
  width:74%;
  padding: 15px;
  box-sizing: border-box;
  float: right;
  margin-left: 28%;
}
}

@media screen and (min-width: 1325px) {
  #main {
    padding: 15px;
    box-sizing: border-box;
    margin-left: 28%;
    margin-right: 10%;
  }
  }


#side { 
  transition: 0.3s;
  box-sizing: border-box;
  text-align: center;
  margin-top: 0px;
}

@media screen and (max-width: 700px) {
#side {
padding: 12px;
margin: 12px auto 0px auto !important;
}
}

@media screen and (min-width: 700px) and (max-width: 1324px) {

  #side {
  width: 26%;
  padding: 20px;
  border-radius: 20px;
  position: fixed;
  margin-top: -50px;
  }
  }

@media screen and (min-width: 1325px) {

  #side {
      padding: 15px;
      position: fixed;
      width:18%;
      margin-top: 0px;
      }
      }



/* -------------------------------------------------------------------------- */

/*	2. Typography



@font-face {
  font-family: "CooperLt";
  font-style: normal;
  src: url("../assets/fonts/CooperLightBT.ttf");
  font-display: swap;
 }

 @font-face {
  font-family: "CooperLt";
  font-style: italic;
  src: url("../assets/fonts/CooperLtBTLightItalic.ttf");
  font-display: swap;
 }

 @font-face {
  font-family: "CooperLtMedium";
  src: url("../assets/fonts/CooperMediumBT.ttf");
  font-display: swap;
 }

 @font-face {
  font-family: "Mulish";
  src: url("../assets/fonts/Mulish-Light.ttf");
  font-display: swap;
 }

 
 @font-face {
  font-family: "MulishMedium";
  src: url("../assets/fonts/Mulish-Medium.ttf");
  font-display: swap;
 }

/* -------------------------------------------------------------------------- */



p {
  font-family: 'CooperLt', Georgia, serif;
  text-rendering: optimizeLegibility;
  font-weight: 300;
  text-align: justify;
  }

  @media screen and (max-width: 699px) {
    p {
      font-size: 1.2em;
      line-height: 1.3;
    }
  }

@media screen and (min-width: 700px) and (max-width: 1324px) {
    p {
      font-size: 1.3em;
      line-height: 1.4;
    }
  }

@media screen and (min-width: 1325px) {

    P {
      font-size: 1.4em;
      line-height: 1.5;
    }
  }


  li {
    font-family: 'CooperLt', Georgia, serif;
    text-rendering: optimizeLegibility;
    font-weight: 300;
    text-align: left;
    }
  
    @media screen and (max-width: 699px) {
      li {
        font-size: 1.1em;
        line-height: 1.3;
      }
    }
  
  @media screen and (min-width: 700px) and (max-width: 1324px) {
      li {
        font-size: 1.4em;
        line-height: 1.5;
      }
    }
  
  @media screen and (min-width: 1325px) {
  
      li {
        font-size: 1.4em;
        line-height: 1.6;
      }
    }



h1 {
  font-family: 'CooperLt', Georgia, serif;
}

@media screen and (max-width: 699px) {
    h1 {
      font-size: 2.4em;
      
    }
  }

@media screen and (min-width: 700px) and (max-width: 1324px) {
    h1 {
      font-size: 3.1em;
    }
  }

@media screen and (min-width: 1325px) {

    h1 {
      font-size: 3.5em;
    }
  }


h2 {
  font-family: 'CooperLt', Georgia, serif;
}

@media screen and (max-width: 699px) {
  h2 {
    font-size: 1.4em;
  }
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  h2 {
    font-size: 1.8em;
  }
}

@media screen and (min-width: 1325px) {
  h2 {
    font-size: 2em;
  }
}



h3 {    
  font-family: 'CooperLt', Georgia, serif;
  font-size: 1.7em;
  font-weight: 300;}

  @media screen and (max-width: 699px) {
    h3 {
      font-size: 1.2em;
    }
  }
  
  @media screen and (min-width: 700px) and (max-width: 1324px) {
    h3 {
      font-size: 1.6em;
    }
  }
  
  @media screen and (min-width: 1325px) {
    h3 {
      font-size: 1.8em;
    }
  }

h4 { 
  font-family: 'CooperLt', Georgia, serif;
  font-size: 1.4em;
  font-weight: 300;}

  @media screen and (max-width: 699px) {
    h4 {
      font-size: 1.06em;
    }
  }
  
  @media screen and (min-width: 700px) and (max-width: 1324px) {
    h4 {
      font-size: 1.2em;
    }
  }
  
  @media screen and (min-width: 1325px) {
    h4 {
      font-size: 1.4em;
    }
  }


h5 { 
  font-family: 'CooperLt', Georgia, serif;
    font-weight: 300;}


    @media screen and (max-width: 699px) {
      h5 {
        font-size: 1.1em;
      }
    }
    
    @media screen and (min-width: 700px) and (max-width: 1324px) {
      h5 {
        font-size: 1.3em;
      }
    }
    
    @media screen and (min-width: 1325px) {
      h5 {
        font-size: 1.4em;
      }
    }


h6 { 
  font-family: "Mulish", Arial, Helvetica, sans-serif;
  font-weight: 300;
  line-height: 1.3
}

@media screen and (max-width: 699px) {
  h6 {
    font-size: 0.95em;
  }
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  h6 {
    font-size: 1.05em;
  }
}

@media screen and (min-width: 1325px) {
  h6 {
    font-size: 1.15em;
  }
}



  a {
    color: var(--text-color);
    /*border-color: var(--fainter-border-color);*/
  }




  @media (prefers-contrast) {
    a {
      color: black;
      border-color: white;
    }
  }

    a:hover {
      color: var(--link-color);
      border-color: var(--thin-border-color);
      text-decoration: underline;
    }



.lead-page-paragraph {
  font-family: 'CooperLt', Georgia, serif;
  text-rendering: optimizeLegibility;
  font-weight: 300;
  text-align: justify;
  padding-top: 20px;
}

.lead-page-paragraph p:first-child::first-letter {
  color: var(--pre-link-color);
  float: left;
  font-family: "CooperLt";
  font-size: 4.8em;
  line-height: 0.85;
  margin-top: -10px;
  padding-right: 10px;
  margin-left: 0px;
  margin-bottom: 5px;
  font-weight:400;
}


@media screen and (max-width: 699px) {  /*??*/

  .lead-page-paragraph {
      font-size: 1.16em;
      line-height: 1.3;
  }
  }


  @media screen and (min-width: 700px) and (max-width: 1324px) {

    .lead-page-paragraph {
      font-size: 1.2em;
      line-height:1.3;
    }
    }

    @media screen and (min-width: 1325px) {

      .lead-page-paragraph {
        font-size: 1.2em;
        line-height:1.4;
    }
    }

    .lead-page-paragraph a {
      border-bottom: grey 1px dashed ;
      
  }

  .lead-page-paragraph a:hover {
    border-bottom: grey 1px solid ;
    
}
  


/*where is page paragraph declared?*/

.page-paragraph a {
  border-bottom: grey 1px dashed ;
  text-decoration: none !important;
  /*text-decoration: underline !important;*/
}

.page-paragraph a:hover {
  border-bottom: grey 1px solid ;
  /*text-decoration: none !important;*/
}


.github-source {
  font-family: 'Mulish';
  color: grey;
  text-align: right;
  margin: auto;
  padding-top: 10px;
}

@media screen and (max-width: 700px) {

  .github-source {
    font-size: 0.7em !important;
  }
}

@media screen and (min-width: 700px) {

  .github-source {
    font-size: 0.8em !important;
  }
}

.github-source a {
  color: grey !important;
}

.github-source a:link {
  color: grey !important;
}

.github-source a:hover {
  color: var(--text-color);
  text-decoration: underline;
}



.highlight-green {
  background-color: rgba(1, 151, 1, 0.841);
  color: var(--true);
  cursor:pointer;
}

.highlight-red {
  background-color: rgba(255, 0, 0, 0.768);
  color: var(--true);
  cursor:pointer;
  height: fit-content;
}

.highlight-blue {
  background-color: #2daee5;
  color: var(--true);
  cursor:pointer;
  height: fit-content;
}

.highlight-yellow {
  background-color: rgba(255, 255, 0, 0.77);
  color: rgb(51, 51, 51);
  cursor:pointer;
  height: fit-content;
}



/* -------------------------------------------------------------------------- */

/*	3. Top Navigation Bar

  Deployed in Header.php

/* -------------------------------------------------------------------------- */


/*HEADER BUTTONS*/


/*Setting Menu Button on Left*/


@media screen and (min-width: 700px) {

#settings-menu {
  position: absolute;
  left: 0px;
  transition: 0.5s;
  border-radius: 50px;
  height: 85px;
  padding-left: 40px;
  left: -66px;
  z-index: 50;
  background: var(--background-color);
  border: solid 1px var(--fainter-border-color);
}

#settings-menu:hover {
left: -40px;
transition: 0.5s;
background: var(--deeper-accent-color);
box-shadow: var(--element-shadow);
}

#settings-menu img {
height: 50px;
padding-top: 20px;
padding-left: 7px;
margin-left: 0px;
}  

}


@media screen and (max-width: 699px) {

  #settings-menu {
    position: absolute;
    left: 0px;
    transition: 0.5s;
    border-radius: 50px;
    height: 85px;
    padding-left: 29px;
    left: -66px;
    z-index: 50;
    background: var(--background-color);
    border: solid 1px var(--fainter-border-color);
  }
  
  #settings-menu:hover {
  left: -50px;
  transition: 0.5s;
  background: var(--deeper-accent-color);
  box-shadow: var(--element-shadow);
  }
  
  #settings-menu img {
  height: 50px;
  padding-top: 20px;
  padding-left: 7px;
  margin-left: 0px;
  margin-right: -16px;
  }  
  
  }





/*Share Menu Button*/

@media screen and (min-width: 700px) {

#share-menu {
  position: absolute;
  right: 0px;
  transition: 0.3s;
  transition: 0.3s;
  border-radius: 70px;
  height: 85px;
  padding-right: 70px;
  right: -60px;
  background-color: var(--background-color);
  border: solid 1px var(--fainter-border-color);
}

#share-menu:hover {
  right: -35px;
  transition: 0.3s;
  background-color: var(--deeper-accent-color);
  box-shadow: var(--element-shadow);
}


#share-menu img {
height: 50px;
padding-top: 20px;
padding-right: 24px;
margin-right: -42px;
}
}


@media screen and (max-width: 700px) {

  #share-menu {
    position: absolute;
    right: 0px;
    transition: 0.3s;
    transition: 0.3s;
    border-radius: 70px;
    height: 85px;
    padding-right: 59px;
    right: -60px;
    background-color: var(--background-color);
    border: solid 1px var(--fainter-border-color);
  }
  
  #share-menu:hover {
    right: -45px;
    transition: 0.3s;
    background-color: var(--deeper-accent-color);
    box-shadow: var(--element-shadow);
  }
  
  
  #share-menu img {
  height: 50px;
  padding-top: 20px;
  padding-right: 24px;
  margin-right: -42px;
  margin-left: 0px;
  }

  }









#earthbook-navbar {
  height: 200px;
  max-height: 100%;
  position: fixed; /* Stay in place */
  z-index: 21; /* Sit on top */
  top: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  z-index: 12;
  transition: 0.3s;
  border-bottom: 1px;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-style: solid;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-flow: column;
  margin: auto;
  z-index: 20;

  background-color: var(--header-footer);
  border-color: var(--thin-border-color);
  box-shadow: var(--element-shadow);
}


@media screen and (max-width: 699px) {
  #earthbook-navbar {
    height: 80px;
  }
}


#main-title {
  font-family: "CooperLT";
  padding: 40px 10px 18px 10px;
  font-variant-caps: small-caps;
  transition: 0.4s;
  color: var(--text-color);
  /*text-shadow: 0 0 3px #ffffff;*/
}



@media screen and (max-width: 700px) { 
  #main-title {
    font-size: 1.7em;
    display: none;
} 
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  #main-title {
    font-size: 2.2em;
  }
}

@media screen and (min-width: 1325px) {
  #main-title {
        font-size: 2.9em;
    }
  }

#sub-title {
  font-family: "CooperLT";
  font-style: italic;
  font-size: 1.5em;
  margin-top: -8px;
  color: var(--text-color);
}

@media screen and (max-width: 700px) { 
#sub-title {
  font-size: 1.4em;
  display: none;
} 
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
#sub-title {
  font-size: 1.6em;
}
}

@media screen and (min-width: 1325px) {
#sub-title {
      font-size: 1.7em;
  }
}

#sub-earthbook {
margin: 20px 0px 20px 0px;
letter-spacing: 4px;
font-variant-caps: all-small-caps;
font-weight: 500;
text-shadow: 0 0 45px rgba(1, 1, 1, 0.1);
user-select: none;  
color: grey;
/*background: repeating-linear-gradient(-45deg, white,  rgb(0, 183, 255),grey,  rgb(0, 183, 255), white);
background-size: 600vw 600vw;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: slide 10s linear infinite forwards;*/
font-family: "Mulish";
}


@media screen and (max-width: 700px) { 
#sub-earthbook {
  display: none;
} 
}

@keyframes slide {
0%{
  background-position-x: 0%;
}
100%{
  background-position-x: 600vw;
}
}



.icon-buttons-night {
  filter: contrast(0%) !important;
}


/*Right Close Button*/

#right-close-button {
  position: absolute;
  right: 0px;
  transition: 0.3s;
  border-radius: 70px;
  height: 85px;
  padding-right: 70px;
  right: -60px;
  top: -20px;

  border: solid 1px var(--thin-border-color);
  background-color: var(--deeper-accent-color); 
  box-shadow: var(--element-shadow)
}


#right-close-button:hover {
  right: -35px;
  transition: 0.3s;
  background-color: var(--background-color);
  box-shadow: var(--element-shadow);

}

#right-close-button img {
height: 50px;
padding-top: 20px;
padding-right: 24px;
margin-right: -42px;
}

/*Right Close Button 2*/

#right-close-button2 {
  position: absolute;
  transition: 0.3s;
  transition: 0.3s;
  border-radius: 70px;
  height: 85px;
  padding-right: 70px;
  right: -60px;
  top: -15px;

  border: solid 1px var(--thin-border-color);
  background-color: var(--deeper-accent-color); 
  box-shadow: var(--element-shadow)
}


#right-close-button2:focus {
  right: -60px;
  transition: 0.1s;
  background-color: var(--background-color);
}

#right-close-button2:hover {
  right: -35px;
  transition: 0.3s;
  background-color: var(--background-color);
  box-shadow: var(--element-shadow);

}

#right-close-button2 img {
height: 50px;
padding-top: 20px;
padding-right: 24px;
margin-right: -42px;
}


/*Left CLose Button*/

#left-close-button {
  position: absolute;
  left: 0px;
  transition: 0.5s;
  border-radius: 50px;
  height: 85px;
  padding-left: 40px;
  left: -66px;
  z-index: 50;
  top: -10px;
  border: solid 1px var(--thin-border-color);
  background-color: var(--deeper-accent-color); 
  box-shadow: var(--element-shadow)
}

#left-close-button:hover {
  left: -40px;
  transition: 0.5s;
  background-color: var(--background-color);
  box-shadow: var(--element-shadow);
}


#left-close-button img {
  height: 50px;
  padding-top: 20px;
  padding-left: 7px;
  margin-left: 0px;
}  

/*Bottom Left Close Button*/

#bottom-left-close-button {
  position: absolute;
  left: 0px;
  transition: 0.5s;
  background:  var(--background-color);
  border-radius: 50px;
  height: 85px;
  box-shadow: var(--element-shadow);
  border: solid 1px var(--thin-border-color);
  padding-left: 40px;
  left: -66px;
  z-index: 50;
  bottom: -10px;
}

#bottom-left-close-button {
left: -40px;
transition: 0.5s;
background-color: var(--background-color);
box-shadow: var(--element-shadow);
}


#bottom-left-close-button img {
height: 50px;
padding-top: 20px;
padding-left: 7px;
margin-left: 0px;
}  


/*Bottom CLose Button*/

.bottom-close-button {
  position: absolute;
  transition: 0.3s;
  background: var(--background-color);
  background-color: var(--background-color);
  border-radius: 30px 30px 5px 5px;
  height: 95px;
  box-shadow: var(--element-shadow);
  border: solid 1px var(--thin-border-color);
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  z-index: 200;
  bottom: -31px;
 text-align: center;
  width: 150px; 
  padding-bottom:50px;
}

.bottom-close-button:hover {
  bottom:-12px;
}


/*
#bottom-close-button:focus {
  bottom:-60px;
}*/



.bottom-close-button img {
height: 30px;
padding-top: 14px;

}  

/*Bottom CLose Button TWO

#bottom-close-button2 {
  position: absolute;
  transition: 0.3s;
  background: var(--background-color);
  background-color: var(--background-color);
  border-radius: 30px;
  height: 85px;
  box-shadow: var(--element-shadow);
  border: solid 1px var(--thin-border-color);
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  z-index: 50;
  bottom: -33px;
 text-align: center;
  width: 150px; 
  padding-bottom:40px;
}

#bottom-close-button2:hover {
  bottom:-22px;
}
/*

#bottom-close-button2:focus {
  bottom:-90px;
}

#bottom-close-button2 img {
height: 30px;
padding-top: 14px;

}  */



/*Top CLose Button*/

#top-close-button {
  position: absolute;
  transition: 0.3s;
  background: var(--background-color);
  border-radius: 30px;
  height: 85px;
  box-shadow: var(--element-shadow);
  border: solid 1px var(--fainter-border-color);
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  z-index: 50;
  top: -40px;
 text-align: center;
  width: 200px; 
}

#top-close-button:hover {
  padding-top:15px;
  border: solid 1px var(--thin-border-color);
}


#top-close-button {
background-color: var(--background-color);
box-shadow: var(--element-shadow);
}


#top-close-button img {
height: 35px;
padding-top: 44px;

}  



/*Gives the mandala on the top earthbook nav bar?*/


#book-title {
  height: 208px;
  background-size: 60%;
  margin: auto;
  transition: 0.4s;
  width: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: block;
  cursor: pointer;
  margin-top: -10px;

  /*background: url(../assets/svgs/tractatus-mandala-full-white.svg) center no-repeat;*/
}

#book-header-logo {
  width: 40%;
margin: auto;
right: 0;
left: 0;
}


  #book-header-logo:hover {
    filter:brightness(100%);
  }
 
  @media screen and (max-width: 699px) {
    #book-header-logo { 
      opacity: 1;
      top: 9px;
      height: 60px;
    }
  }

    @media screen and (min-width: 700px) {
      #book-header-logo { 
        opacity: 0;
        top: 50px;
      }
    }
  


/* -------------------------------------------------------------------------- */

/*	4. User Settings Overlay Curtain 

    Comes in from the left after clicking +- button.

/* -------------------------------------------------------------------------- */

#left-settings-overlay {
  background-color: var(--settings-background); 
  color: var(--text-color);
  z-index: 26;

}


/* Table of Contents Menu (background) */
.overlay-settings {
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 21; /* Sit on top */
  left: 0;
  top: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}


/* Position the content inside the overlay */
.overlay-content-settings {
  position: initial;
  text-align: center; /* Centered text/links */
   /*margin-top: 30px; 30px top margin to avoid conflict with the close button on smaller screens */
  font-family: "CooperLT";
  font-size: smaller;
  display: flex;
  justify-content: center;
  flex-flow: column;
  height:100%;  
  margin: auto;
}


@media screen and (max-width: 700px) {
  .overlay-content-settings {
    width: 77%;
    font-size: 0.9em;
    /*margin-top: 6%;*/
}
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  .overlay-content-settings {
    width: 65%;
    font-size: 0.9em;
    /*margin-top: 2%;*/
}
}

@media screen and (min-width: 1325px) {
    .overlay-content-settings {
      width: 69%;
      margin: auto;
    }
}

.settings-label {
  font-family: 'Mulish';
  font-size: 1.2em;
  margin: 18px 0px 8px 0px;
}

#languages {
  display: flex;
  margin: 10px auto 10px auto;
  justify-content: center;
  padding: 5px 30px 5px 30px;
  background: var(--background-color);
  border-radius: 55px;
  width: fit-content;
}

.language-selector {
  font-family: 'Mulish';
  padding: 10px 20px 10px 20px;
  background: grey;
  border-radius: 10px;
  margin: 10px;
  filter: invert(100);
  font-size: 1.1em;
  cursor: pointer;

}

.language-selector a:hover {
  color: var(--deeper-accent-color);
}

.language-selector a {
  color: var(--text-color);
}



/* -------------------------------------------------------------------------- */

/*	5. Share Overlay Curtain

  Comes in from the right after clicking share button in header.

/* -------------------------------------------------------------------------- */



#right-share-overlay {
  background-color: var(--deeper-accent-color); 
  color: inherit;
  z-index: 26;
}




/* Table of Contents Menu (background) */
.share-overlay {
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 21; /* Sit on top */
  right: 0;
  top: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}


/* Position the content inside the overlay */
.share-overlay-content {
  position: initial;
  text-align: center; /* Centered text/links */
   /*margin-top: 30px; 30px top margin to avoid conflict with the close button on smaller screens */
  font-family: "CooperLT";
  display: flex;
  justify-content: center;
  flex-flow: column;
  height:100%;
  margin: auto;
}


@media screen and (max-width: 700px) {
  .share-overlay-content {
    width: 85%;
    font-size: 0.9em;
    /*margin-top: 6%;*/
}
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  .share-overlay-content {
    width: 65%;
    font-size: 0.9em;
    /*margin-top: 2%;*/
}
}

@media screen and (min-width: 1325px) {
    .share-overlay-content {
      width: 69%;
      margin: auto;
    }
}

/*Not darkified!*/

.copy-section {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
}

.copy-box { 
  background: #f4f4f4;
  border: 2px solid #ddd;
  border-left: 3px solid;
  color: #666;
  page-break-inside: avoid;
  font-family: monospace;
  width: 100%;
  overflow: auto;
  word-wrap: break-word;
  display: block;
  text-align: left;
  justify-content: center;
  border-radius: 5px 0px 0px 5px;
  margin-right: -5px;
}

.copy-check {
  font-size: 15px;
  line-height: 1.6;
  padding-right: 10px;
  width: 10%;
  font-weight: bolder;
  color: green !important;
  align-self: center;
  height: 100%;
  }

#check {display: none;}

[contenteditable=true]:empty:not(:focus):before {
  content: attr(data-placeholder);
  color: #888; /* Placeholder text color, adjust as needed */
}

.btn {
  border: 2px solid #ddd;
    color: white;
      background: grey;


  font-weight: bolder;
  align-self: center;
  cursor: pointer;
  justify-content: center;
  border-radius: 0px 5px 5px 0px;
  padding: 5px;
  text-align: center;
  display: flex;

  }

  .btn:hover {color: black;}



 
  @media screen and (max-width: 700px) {
    .copy-box { 

      font-size: 10px;
      line-height: 1.2;
      margin: auto;
      border-radius: 4px;
      margin-right: -6%;
      padding-right: 6%;
      width: 100%;
      padding: 10px 45px 10px 10px;    
      }

    .btn {
      font-size: 12px;
      height: 100%;
      width: 20%;
    }

 
  .copy-check {
    display: inline;
    }
      }

@media screen and (min-width: 700px) and (max-width: 1324px) {

  .copy-box { 
    font-size: 10px;
    line-height: 1.2;
    margin: auto;
    border-radius: 4px;
    margin-right: -6%;
    padding-right: 6%;
    width: 100%;
    padding: 10px;
  }
  .btn {
    font-size: 12px;
    height: 100%;
    width: 20%;
  }

.copy-check {
  display: inline;
  }
}

@media screen and (min-width: 1325px) {
  .copy-box { 
    font-size: 15px;
    line-height: 1.6;
    width: 100%;
    padding: 1em 1.5em;
    border-radius: 5px 0px 0px 5px;
    margin-right: -5px;
    padding-right: 0%;
  }

  .btn {
    font-size: 12px;
    height: 100%;
    width: 20%;
    font-size: 18px;
  }

  .copy-check {
    line-height: 2.9; 
    } 
}



/* Position the close button (top right corner) 
.share-overlay .closebtn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 50px;
  font-weight: lighter;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap 
@media screen and (max-height: 700px) {
  .share-overlay a {
  font-size: 20px;
  }

  .share-overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 15px;
  }
} 



/* -------------------------------------------------------------------------- */

/*	6. Buy Overlay Curtain

/* -------------------------------------------------------------------------- */



#buy-curtain {
  background-color: var(--fainter-border-color);
  z-index: 26;
}

.buy-overlay {

  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 25;
  bottom: 0;
  left: 0;
  overflow-y: hidden;
  transition: 0.5s;
  display: flex;
/*
  overflow-x: hidden;  Disable horizontal scroll */
}


/* Position the buy content inside the overlay */
.buy-overlay-content {
  position: initial;
  text-align: center; /* Centered text/links */
   /*margin-top: 30px; 30px top margin to avoid conflict with the close button on smaller screens */
  font-family: "CooperLT";
  display: flex;
  justify-content: center;
  flex-flow: column;
  /*height:100%;*/
  margin: auto;
  padding-top: 20px;
}



@media screen and (max-width: 700px) {
  .buy-overlay-content {
    width: 92%;  
    padding-top: 30px; 
}
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  .buy-overlay-content {
    width: 95%;
}
}

@media screen and (min-width: 1325px) {
    .buy-overlay-content {
      width: 90%;
      margin: auto;
    }
}


.three-books {
  display: flex;
  justify-content: center;
  flex-direction: row;
  margin: 0px auto 0px auto;
  width: 100%;

}

.buy-book-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.buy-book-info-title {
  font-family: 'CooperLt';
  height: fit-content;
}

.buy-book-info-text {
  font-family: 'Mulish';
  height: fit-content;
  font-weight: 300;
  color: var(--subdued-text)

}


@media screen and (max-width: 700px) {

  .three-books {
    flex-direction: column;
    align-self: center;
    /*margin-top: 6%;*/
    width: 90%;

  }

  .book-buy-info  {
    width: 60%;
    text-align: left;
  }

  .buy-book-info-title {
    font-size: 1.3em;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .buy-book-info-text {
    font-size: 0.9em;
    margin-bottom: 6px;
  }

  .book-listing img  {
    width: 101px;
    height: 150px;
    text-align:center;
    
  }

  .book-buy-info .action-btn {
    width: 140px !important;
    float: right;
    margin-top: 0px;
  }
}


@media screen and (min-width: 701px) and (max-width: 1324px) {

  .book-listing img  {
    width: 250px;
    height: 370px;
    text-align:right;
    margin: auto;
    
  }
}

@media screen and (min-width: 700px) {

  .buy-book-info-title {
    font-size: 2em;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .buy-book-info-text {
    font-size: 1.3em;
    margin-bottom: 10px;
  }

  .book-buy-info .action-btn {
    margin-top: 20px;
  }
}



.buy-book {
  display: flex;
  flex-direction: column;
  padding: 0px 10px 15px 10px;
  width: 30%;
}

@media screen and (max-width: 700px) {
  .buy-book {
    width: 100%;
}
}

.book-listing {
  flex-direction: column;
  display: flex;
  /*align-self: top;*/
}


@media screen and (max-width: 700px) {
  .book-listing {
    flex-direction: row;
}



}


/* -------------------------------------------------------------------------- */

/*	7. Read Overlay Curtain

/* -------------------------------------------------------------------------- */



#read-curtain {
  background-color: var(--header-footer); 
  z-index: 26;
}



/* Table of Contents Menu (background) */
.read-overlay {

  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 25;
  bottom: 0;
  left: 0;
  overflow-y: hidden;
  transition: 0.5s;
  display: flex;
/*
  overflow-x: hidden;  Disable horizontal scroll */
}


/* Position the content inside the overlay */
.read-overlay-content {
  position: initial;
  text-align: center; /* Centered text/links */
   /*margin-top: 30px; 30px top margin to avoid conflict with the close button on smaller screens */
  font-family: "CooperLT";
  display: flex;
  justify-content: center;
  /*height:100%;*/
  margin: auto;
}

@media screen and (max-width: 700px) {
  .read-overlay-content {
    width: 88%; 
    flex-flow: column;  
}
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  .read-overlay-content {
    width: 75%;
    flex-flow: row;
}
}

@media screen and (min-width: 1325px) {
    .read-overlay-content {
      width: 60%;
      margin: auto;
      flex-flow: row;
      
    }
}


.read-book-pic {
  display: flex;
  justify-content: center;
  flex-direction: row;
  margin: auto;
  height: fit-content;
}

.read-book-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: 'CooperLt';
}

.read-book-title {
  font-family: 'CooperLt';
  height: fit-content;

}

.read-book-info-text {
  font-family: 'Mulish';
  height: fit-content;
  font-weight: 300;
}

.button-row-read {
  display: flex;
  font-family: 'Mulish', sans-serif;
}

 

@media screen and (max-width: 700px) {

  .read-book-pic {
    margin: auto auto 0px auto;
  }

  .read-book-pic img{
    flex-direction: column;
    align-self: center;
    width: 260px;
    height: 307px;

    display: none;
  }

  .read-book-info  {
    width: 100%;
    text-align: center;
    margin-bottom: 100px;    
  }

  .read-book-info-title {
    font-size: 2em;
    margin-top: 18px;
    margin-bottom: 10px;
  }

  .read-book-info-text {
    font-size: 1em;
    margin-bottom: 20px;
  }

  .button-row-read {
    flex-direction: row;
    margin-top: 0px;
    justify-content: center;

  }

  .button-row-read2 {
    flex-direction: row;
    justify-content: center;
    text-align: center;
  }

  .button-row-read .action-btn {
    width: 120px ;
    max-width: 120px ;
    margin-top: 8px;
  }

  .button-row-read2 .action-btn {
    width: 300px !important;
    margin: 0px auto 0px auto !important;
  }
}




@media screen and (min-width: 701px) and (max-width: 1324px) {

  .read-book-pic img  {
    width: 400px; /*56%;*/
    text-align:right;
    height: 473px;
  }

  .read-book-info-title {
    font-size: 3em;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: left;
  }

  .read-book-info-text {
    font-size: 1.5em;
    margin-bottom: 10px;
    text-align: left;
  }

  .button-row-read {
    flex-direction: row;

  }

  .button-row-read .action-btn {
    width: 140px !important;
    margin-top: 10px;
  }

  .button-row-read2 .action-btn {
    width: 380px !important;
    margin-top: 20px;
  }
}



@media screen and (min-width: 1325px) {

  .read-book-pic img  {
    width: 500px; /*56%;*/
    text-align:right;
    height: 591px;
  }

  .read-book-info-title {
    font-size: 3.3em;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: left;
  }

  .read-book-info-text {
    font-size: 1.5em;
    margin-bottom: 10px;
    text-align: left;
  }

  .button-row-read {
    flex-direction: row;
  }

  .button-row-read .action-btn {
    width: 140px !important;
    margin-top: 5px;
  }

  .button-row-read2 .action-btn {
    width: 380px !important;
    margin-top: 25px;
  }

  
}


.read-book-icon {
  margin: 0px auto 0px auto;
}


  @media screen and (min-width: 700px) {
    .read-book-icon {
    display: none;
}
  }



/* -------------------------------------------------------------------------- */

/*	8. Bookplate Overlay Curtain

/* -------------------------------------------------------------------------- */



/*BOOKPLATE OVERLAY*/

#top-bookplate {
  background-color: var(--slider); 
  z-index: 21;
 /* text-shadow: 0 0px 4px var(--background-color);*/
}



/* Table of Contents Menu (background) */
.overlay-bookplate {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content-bookplate {
  position: initial;
  text-align: center; 
  margin: auto; 
  display: flex;
  justify-content: center;
  flex-flow: column;
  height:100%;
  font-size: smaller;
}

.bookplate-title { 
  font-variant-caps: small-caps;
  font-weight: 500;
  margin-top: 0.6em;
  letter-spacing: 1px;
}


.bookplate-subtitle {
  margin-top: -0.1em;
  font-weight: 300;
}

.bookplate-authors {
  margin-top: -0.1em;
}

.bookplate-year {
  margin-top: -0.2em;
}

.bookplate-motto {
  margin-top: -0.1em;
}




@media screen and (max-width: 700px) {
  #bookplate-img {
  height: 200px;
  background-size: contain;}


.overlay-content-bookplate {
  width: 70%;
}
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  #bookplate-img {height: 350px;
}
}

.overlay-content-bookplate {
    width: 90%;
  }


@media screen and (min-width: 1325px) {
  .overlay-content-bookplate {
    width: 65%;
  }
  #bookplate-img {
    height: 300px;
  }
}


/*
#bookplate-button {
  position: absolute;
  width: fit-content;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  transition: 0.3s;
  padding: 30px;
  padding-bottom: 30px;
  border-radius: 50px;
  background-color: var(--deeper-accent-color-dark);
  padding-top: 70px;
  margin-top: -80px;
  box-shadow: var(--element-shadow);
  display: none;
}

#bookplate-button:hover {
  top: 40px;
}
*/


/* -------------------------------------------------------------------------- */

/*	9. Search Overlay

  Comes in from Right.

/* -------------------------------------------------------------------------- */



#right-search-overlay {
  background-color: var(--fainter-border-color); 
  color: inherit;
  z-index: 26;
}


/* Table of Contents Menu (background) */
.search-overlay {
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 21; /* Sit on top */
  right: 0;
  top: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}


/* Position the content inside the overlay */
.search-overlay-content {
  position: initial;
  text-align: center; /* Centered text/links */
   /*margin-top: 30px; 30px top margin to avoid conflict with the close button on smaller screens */
  font-family: "CooperLT";
  display: flex;
  justify-content: center;
  flex-flow: column;
  height:fit-content;
  margin: auto;
  transition: margin-top 0.5s ease-in-out;
}


@media screen and (max-width: 700px) {
  .search-overlay-content {
    width: 85%;
    font-size: 0.9em;
    /*margin-top: 6%;*/
    margin-top: 50%;
}
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  .search-overlay-content {
    width: 65%;
    font-size: 0.9em;
    /*margin-top: 2%;*/
    margin-top:30%;
}
}

@media screen and (min-width: 1325px) {
    .search-overlay-content {
      width: 69%;
      margin: auto;
      margin-top:14%;
    }
}

/*Not darkified!*/

.copy-section {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
}

.copy-box { 
  background: #f4f4f4;
  border: 2px solid #ddd;
  border-left: 3px solid;
  color: #666;
  page-break-inside: avoid;
  font-family: monospace;
  width: 100%;
  overflow: auto;
  word-wrap: break-word;
  display: block;
  text-align: left;
  justify-content: center;
  border-radius: 5px 0px 0px 5px;
  margin-right: -5px;
}

.copy-check {
  font-size: 15px;
  line-height: 1.6;
  padding-right: 10px;
  width: 10%;
  font-weight: bolder;
  color: green !important;
  align-self: center;
  height: 100%;
  }

#check {display: none;}


 
  @media screen and (max-width: 700px) {
    .copy-box { 

      font-size: 10px;
      line-height: 1.2;
      margin: auto;
      border-radius: 4px;
      margin-right: -6%;
      padding-right: 6%;
      width: 100%;
      padding: 10px 45px 10px 10px;    
      }

    .btn {
      font-size: 12px;
      height: 100%;
      width: 20%;
    }

 
  .copy-check {
    display: inline;
    }
      }

@media screen and (min-width: 700px) and (max-width: 1324px) {

  .copy-box { 
    font-size: 10px;
    line-height: 1.2;
    margin: auto;
    border-radius: 4px;
    margin-right: -6%;
    padding-right: 6%;
    width: 100%;
    padding: 10px;
  }
  .btn {
    font-size: 12px;
    height: 100%;
    width: 20%;
  }

.copy-check {
  display: inline;
  }
}

@media screen and (min-width: 1325px) {
  .copy-box { 
    font-size: 15px;
    line-height: 1.6;
    width: 100%;
    padding: 1em 1.5em;
    border-radius: 5px 0px 0px 5px;
    margin-right: -5px;
    padding-right: 0%;
  }

  .btn {
    font-size: 12px;
    height: 100%;
    width: 20%;
    font-size: 18px;
  }

  .copy-check {
    line-height: 2.9; 
    } 
}



/* Position the close button (top right corner) */
.search-overlay .closebtn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 50px;
  font-weight: lighter;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 700px) {
  .search-overlay a {
  font-size: 20px;
  }

  .search-overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 15px;
  }
} 




/*SEARCH input box*/

#search_input {

  background: #f4f4f4;
  border: 2px solid #ddd;
  border-left-color: rgb(221, 221, 221);
  border-left-style: solid;
  border-left-width: 2px;
  border-left-color: rgb(221, 221, 221);
  border-left-style: solid;
  border-left-width: 2px;
  border-left: 3px solid;
  border-left-color: currentcolor;
  border-left-color: currentcolor;
  color: #666;
  page-break-inside: avoid;
  font-family: monospace;
  width: 100%;
  overflow: auto;
  word-wrap: break-word;
  display: block;
  text-align: left;
  justify-content: center;
  border-radius: 5px 0px 0px 5px;
  margin-right: -5px;
  font-size: 15px;
  line-height: 1.6;
  width: 100%;
  padding: 1em 1.5em;
    padding-right: 1.5em;
  padding-right: 1.5em;
  border-radius: 5px 0px 0px 5px;
  margin-right: -5px;
  padding-right: 0%;
  border-left-color: green;
  
  }




/* -------------------------------------------------------------------------- */

/*	10. Landing Page Content 

  Includes Content Box Breakdown

/* -------------------------------------------------------------------------- */


.welcome-to {
  font-family: 'CooperLt', Georgia, serif;
  text-rendering: optimizeLegibility;
  font-weight: 300;
  margin-top: 20px;
  margin-bottom: 25px;
}

@media screen and (max-width: 699px) {
  .welcome-to {
    font-size: 1.25em;
    line-height: 1.4;

  }
}

@media screen and (min-width: 700px) {
  .welcome-to {
    font-size: 1.3em;
    line-height: 1.35;

  }
}

/*.welcome-to:hover {text-decoration: underline !important;}*/



/*Main section*/

.lead-text {   /*for the first paragraph of the dashboard*/
    font-family: "Mulish", Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    font-weight: 300;
}

@media screen and (max-width: 699px) {
  .lead-text {
      font-size: 1.1em;
      line-height: 1.3;
      padding: 12px 3px 23px 3px;
      text-align: center;
  }
  }

  @media screen and (min-width: 700px) {
    .lead-text {
        font-size: 1.5em;
        margin-top: 20px;
        padding-bottom: 35px;
    }
    }

#line {
  border-color: var(--thin-border-color);
  border-style: dashed ;
  margin: 15px 0px 20px 0px;
  border-width: 1px;
  margin: 0px;}


  
  .book-pic {
    padding: 60px;
    width: 50%;
    text-align: right;}


.side-book-pic {
    width: 100%;
    }

#side img {
    text-align: center;
    width: fit-content;
    max-width: 375px;
    /*border: 1px solid;
    border-color: rgb(163, 163, 163);*/
    border-radius: 12px;
    margin: auto;
    width: 83%;
    height:auto;
    box-shadow: 0 4px 15px rgba(85, 84, 84, 0.4);
    background-color: #242424;
    -moz-box-sizing: border-box;
}

@media screen and (max-width: 700px) {
  #side img {
    width: 215px;
    height: 300px;
    border-radius: 10px;
    background-color: #242424;

  }
}

/*These are the main page boxes for the main sections of the book*/

#book-box {
  display: block;
  width: 100%;
  padding: 0px;
  margin: auto;
  font-family: "Mulish";
  display: inline;
  text-align: left;
  text-decoration: none;
  font-size: 1.2em;
  transition: 0.3s;
  border-color:  var(--thin-border-color);
}

@media screen and (max-width: 700px) {
  #book-box {
  font-size: 1.05em;
  }
}

.book-box-header {
  font-family: 'CooperLt';
  font-size: 1.3em;
  padding: 28px 0px 12px 5px;
  color: inherit;
}


#book-box a {  
  color: var(--pre-link-color);

  /*background: url(../assets/svgs/content-arrow.svg) left center no-repeat var(--header-footer);
  background-size: 30px;
  background-position-x: 18px;*/
}

#book-box a:hover {  
  color: var(--link-color);
  /*background: url(../assets/svgs/content-arrow-45.svg) left center no-repeat var(--deeper-accent-color);
  background-size: 30px;
  background-position-x: 18px;*/
  ;
}

.chapter-top {
  border-radius: 20px 20px 0px 0px;
  border-width: 1px;
  border-color:inherit;
  display: flex;
  flex-flow: row nowrap;
  padding: 0px;
  border-style: solid;
  cursor: pointer;
  align-items: stretch;
  z-index: 9;
  background: inherit;
  font-family: inherit;
}

.chapter-middle {
  border-radius: 0px 0px 0px 0px;
  border-width: 1px;
  border-color:inherit;
  border-style: solid;
  cursor: pointer;
  align-items: stretch;
  display: flex;
  flex-flow: row nowrap;
  padding: 0px;
  z-index: 9;
  background: inherit;
  border-top: none;
}

.chapter-bottom {
  border-radius: 0px 0px 25px 25px;
  font-family: inherit;
  border-width: 1px;
  border-color:inherit;
  display: flex;
  flex-flow: row nowrap;
  padding: 0px;
  border-style: solid;
  cursor: pointer;
  align-items: stretch;
  z-index: 9;
  border-top: none;
  background: inherit;
  
}

.chapter-name {
  flex: 80%;
  padding: 15px 16px 15px 63px;
  margin:  auto 0px auto 0px;
  /*background-image: src('svgs/content-arrow.svg');
  background: url(../assets/svgs/content-arrow.svg) left center no-repeat;
  background-size: 30px;
  background-position-x: 18px;*/
  display: flex;
  z-index: 10;
  font-family: "Mulish";
}


.chapter-name:hover + .word-count {
  display: block;
}

.word-count {
  padding: 15px 35px 15px 0px;
  margin:  auto 0px auto 0px;
  color: grey;
  text-align: right;
  flex: 20%;
  display: none;
  font-family: 'CooperLT';
}


/* -------------------------------------------------------------------------- */

/*	11. Chapter Footnote Section

 Could this be moved to the chapter page??

/* -------------------------------------------------------------------------- */



.footnote-section {   /*for the first paragraph of the dashboard*/
  margin-top: 50px; 
  margin-bottom: 120px;

}

#footnotes-arrow {
  width: 22px; 
  height: 22px;
  background: url(../assets/icons/down-arrow.svg) no-repeat center;
  background-size:contain;
  margin: auto 15px auto 0;
}


.footnotes-title {
  border-bottom: 1px;
  font-family: 'CooperLt', Georgia, serif;
  border-bottom-style: dotted;
  font-size: 1.4em;
line-height: 1.6;
cursor: pointer;
font-variant-caps: all-petite-caps;
color: grey;
border-bottom-color: grey;
margin: 15px 0px 25px 0px;
}

.footnotes-title:hover {
  border-bottom-style: solid;

}

.footnote {    
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.footnote-number {
  font-family: 'CooperLT';
  font-size: 1.1em;
  font-weight: 300;
  font-style: italic;
  padding: 15px 0px 0px 0px;
  width: 15px;
  text-align: right;
  opacity: 0.85;
}

  .footnote-text {  
    font-family: 'Mulish';
    font-size: 1.13em;
    font-weight: 300;
    opacity: 0.85;
    width: 90%;
    padding-left: 15px;
    padding-top: 15px;
  }


  @media screen and (max-width: 699px) {
    .footnote-text { 
      font-size: 0.9em;
    line-height: 1.15;
    }
  }

  #footnotes-concealer {
    background-image: linear-gradient(rgba(255,0,0,0), var(--background-color));
    height: 150px;
    width: 100%;
    margin-top: -150px;
    z-index: 10;
    position: absolute;
    right: 0;
    left: 0;
    transition:0.4s;
  }



/* -------------------------------------------------------------------------- */

/*	12. Footer Content

/* -------------------------------------------------------------------------- */



#navbar-bottom-day {
  
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;

  padding: 10px 10px 25px 10px;
  border-top: 1px;
  border-style: solid;
  border-bottom: none;
  border-right: none;
  border-left: none;
  
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 60px;

  /*background: url(../assets/svgs/tractatus-mandala-full-white.svg) center no-repeat;*/
  background-size: 60%;
  background-color: var(--header-footer);
  border-color: var(--thin-border-color);
  color:  var(--text-color) ;
  z-index: 12;  
  box-shadow: var(--element-shadow);
  overflow: hidden;
}


.footer-icon-left { 
  padding: 20px 5px 20px 5px;
  width: 40px;
}

.footer-icon-right { 
  padding: 20px 20px 20px 10px;
  width: 40px;
}


/*duplicate for chatpers*/

.footer-left {
  
  text-align: left;
  flex: auto;
  display: flex;
  height: 100%;
  align-items: center;
  flex-grow: 1;
  font-family: "Mulish";
  font-size: 1em;
}


.footer-right {
  text-align: right;
  display: flex;
  flex: auto;
  height: 100%;
  align-items: center;
  flex-grow: 1;
  flex-direction: row-reverse;
  font-family: "Mulish";
  font-size: 1em;
  margin: auto;
}


.footer-middle {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;
  font-family: 'CooperLt';
  font-size: 1.5em;
  line-height: 65px;
}

.what-is {
  text-align: right;
  width: fit-content;
  display: flex;
  transition: 0.5s;
  order: 1;
  opacity: 0;
  margin-right: -50px

}

@media screen and (max-width: 1324px) {
  .footer-middle {font-size: 1em;}
  .what-is { opacity: 1;
    margin-right: 0px;}
  .an-earthbook { opacity: 1;
    margin-right: 0px;}
  .question {   opacity: 1;
    margin-left: 0px;}
  .footer-word {
    display: none;
  }

}


.an-earthbook {
  text-align: center;
  width: fit-content;
  padding-left: 6px;
  transition: 0.5s;
  order: 2;
 
}

.question {
  text-align: left;
  width: fit-content;
  display: flex;
  transition: 0.5s;
  order: 3;
  opacity: 0;
  margin-left: -8px;
}

@media screen and (max-width: 699px) {
  .question {
    opacity: 1;
    margin-left: 0px;
  }
}

.footer-middle:hover > .an-earthbook + .what-is  {
  opacity: 0.8;
  margin-right: 0px;
  
 }


.footer-middle:hover > .question {
  opacity: 1;
  margin-left: 0px;
}


/* -------------------------------------------------------------------------- */

/*	13. Text Size Adjust Section

/* -------------------------------------------------------------------------- */


#text-adjust {
margin: 10px auto 12px auto;
width: fit-content;
background: var(--header-footer);
border-radius: 55px;

}

#increase-font-size  {
padding: 10px;
border: grey;
background: white;
color: black;
border-style: solid;
border-radius: 40px 10px 10px 40px;
border-width: 1px;
font-size: 25px;
margin: 20px;
font-family: "Mulish";
display: inline;
text-align: center;
text-decoration: none;
margin: 7px;
cursor: pointer;
    }

#normal-font-size {
  padding: 10px;
  border: grey;
  background: white;
  color: black;
  border-style: solid;
  border-radius: 5px;
  border-width: 1px;
  font-size: 25px;
  margin: 20px;
  font-family: "Mulish";
  display: inline;
  text-align: center;
  text-decoration: none;
  margin: 7px;
  cursor: pointer;
    }

#decrease-font-size {
  padding: 10px;
  border: grey;
  background: white;
  color: black;
  border-style: solid;
  border-radius: 10px 40px 40px 10px;
  border-width: 1px;
  font-size: 25px;
  margin: 20px;
  font-family: "Mulish";
  display: inline;
  text-align: center;
  text-decoration: none;
  margin: 7px;
  cursor: pointer;
    }


/* -------------------------------------------------------------------------- */

/*	14. ACTION BUTTONS

    The oval solide Buttons on the main page and other locations

/* -------------------------------------------------------------------------- */


.action-btn {
    border: var(--thin-border-color);
    background: var(--deeper-accent-color);
    border-style: solid;
    border-radius: 25px;
    border-width: 1px;
    color: var(--text-color);
    font-family: "Mulish", Arial, Helvetica, sans-serif;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
    cursor: pointer; 
    margin: 6px; 
    display: block;
    margin: auto;
}

.action-btn:hover {
    background: var(--header-footer);
    font-weight: 500;
    color: var(--link-color);
  }


  .action-btn a {
    text-decoration: none;
    font-weight: 300;
    color: var(--text-color);
  }



.action-btn a:link {
  text-decoration: none;
  font-weight: 500;
  color: var(--link-color);
}


a:link {
  text-decoration: none;
  color: var(--text-color);
}

a:visited {
  text-decoration: var(--text-color);
}

a:hover {
  text-decoration: var(--text-color);
}

a:active {
  text-decoration: var(--text-color);
}


@media screen and (max-width: 700px) {

  .action-btn {

    padding: 7px 5px 8px 5px;
    margin: 5px;
    flex-grow: 1;
    font-size: 0.88em;
  }
}

@media screen and (max-width: 700px) {
  .tc-button-row .action-btn {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tc-button-row .action-btn-label {
    display: none;
  }
}

  
  @media screen and (min-width: 700px) and (max-width: 1324px) {

    .action-btn {
      padding-top: 6px;
padding-bottom: 6px;
font-size: 1.1em;
margin: 8px 5px;


  }
}
  
  @media screen and (min-width: 1325px) {

    .action-btn {

      padding-top: 9px;
      padding-bottom: 9px;
      font-size: 1.1em;
      margin: 8px;
      display: block;
  }
}


.button-row {
  margin: -10px auto -8px auto; 
}

@media screen and (max-width: 700px) {
  .button-row {
    display: flex;
    flex: row;
    align-items: stretch;
  }
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  .button-row {
      display: block;
      flex: row;}
    }

@media screen and (min-width: 1325px) {
  .button-row {
      display: block;
        }
      }



/*  BOOK NOTES */



/*Top CLose Button*/

.top-close-button {
  position: absolute;
  transition: 0.3s;
  background: var(--background-color);
  border-radius: 30px;
  height: 85px;
  box-shadow: var(--element-shadow);
  border: solid 1px var(--fainter-border-color);
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  z-index: 50;
  top: -40px;
 text-align: center;
  width: 200px; 
}

.top-close-button:hover {
  padding-top:15px;
  border: solid 1px var(--thin-border-color);
}


.top-close-button {
background-color: var(--background-color);
box-shadow: var(--element-shadow);
}


.top-close-button img {
height: 35px;
padding-top: 44px;

}  


.chapter-name-bn {
  flex: fit-content;
  display: flex;
  z-index: 10;
  text-align: left;
  cursor: text;
  flex-flow: column;
}

@media screen and (max-width: 700px) {
  .chapter-name-bn {
    padding: 11px 5px 11px 15px;
    margin:  auto 0px auto 0px;
  }
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  .chapter-name-bn {
    padding: 12px 25px 12px 35px;
    margin:  auto 0px auto 0px;
  }
}

@media screen and (min-width: 1325px) {
  .chapter-name-bn {
    padding: 15px 25px 15px 35px;
    margin:  auto 0px auto 0px;

  }
  }


/* -------------------------------------------------------------------------- */

/*	15. TABLE OF CONTENTS (tc) of Overlay Curtain

  Slides down from the top on all pages.

/* --------------------------------------------------------------------------

*/

 .overlay-tc {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 0;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 21; /* Sit on top */
    left: 0;
    top: 0;
    display: flex;
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
  
  /* Position the content inside the overlay */
  .overlay-content-tc {
    position: relative;
    /* 25% from the top */
    width: 75%; /* 100% width */
    text-align: center; /* Centered text/links */
    /* 30px top margin to avoid conflict with the close button on smaller screens */
    text-align: center;
    font-family: "CooperLT";
    margin: auto; 
    display: flex;
    justify-content: center;
    flex-flow: column;
    padding-bottom: 20px;
    padding-top: 20px;
}

@media screen and (max-width: 700px) {
  .overlay-content-tc {
    width: 90%;
  }
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  .overlay-content-tc {
    width: 75%;
  }
}

@media screen and (min-width: 1325px) {
  .overlay-content-tc {
      width: 64%;
    }
  }


.contents-title-box {
  text-align: center;
  width: 100%;
  margin: 40px auto 0px auto;
  
}

.contents-title {
  font-family: 'CooperLt';
  font-variant-caps: small-caps;
  letter-spacing: 5px;
  width: 100%;
  display: block;
  margin: 0px;

}

@media screen and (max-width: 700px) {
  .contents-title {
    font-size: 1.4em;
    padding-bottom: 0px;
    
  }
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  .contents-title {
    font-size: 2.0em;
    padding-bottom: 0px;
  }
}

@media screen and (min-width: 1325px) {
  .contents-title {
    font-size: 3.6em;
    padding-bottom: 0px;
    }
  }


  .contents-books123 {
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: center;
    height:fit-content;

  }
  
  .tc-a-book {
    font-family: 'Mulish';
    font-variant-caps: small-caps;
    font-family: 'CooperLt';
    font-variant-caps: small-caps;
    cursor: pointer;
      border: none;
      background: none;
  }

 /* @media screen and (max-width: 700px) {
    .tc-a-book {
    letter-spacing: 4px;
    padding: 15px 15px 15px 15px;
    font-size: 1.3em;
    }
  }*/

  @media screen and (max-width: 700px) {
    .tc-a-book {
    letter-spacing: 5px;
    padding: 3px 15px 2px 15px;
    font-size: 1.35em;
    margin: 3px 0px 1px 0px;


    }
  }

#button-one {
  white-space: nowrap;
}

    @media screen and (min-width: 700px) and (max-width: 1324px) {
    .tc-a-book {
    letter-spacing: 5px;
    padding: 2px 15px 2px 15px;
    font-size: 2.3em;
    margin: 6px 0px 2px 0px;
    }
  }

  @media screen and (min-width:  1325px) {
    .tc-a-book {
      letter-spacing: 5px;
      padding: 5px 20px 5px 20px;
      font-size: 3em;
      margin: 10px 0px 5px 0px;
    }
  }

  
  @media screen and (max-width: 700px) {
    .contents-title {
      font-size: 1.05em;
      margin-top: 10px;
    }
  }
  
  @media screen and (min-width: 700px) and (max-width: 1324px) {
    .contents-title {
      font-size: 1.3em;
      margin-top: 10px;
    }
  }
  
  @media screen and (min-width: 1325px) {
    .contents-title {
      font-size: 1.6em;
      margin-top: 30px;
      }
    }
  



.tc-item {
  font-family: 'Mulish';
  padding: 0px;
  border-bottom-width: 1px;
  border-color:inherit;
  border-style: solid;
  cursor: pointer;
  align-items: stretch;
  border-top: none;
border-right: none;
border-left: none;
display: flex;
border-bottom-color: var(--fainter-border-color);
}



.tc-item:hover {
  border-bottom-width: var(--thin-border-color);
}

@media screen and (max-width: 700px) {
  .tc-item {
    font-size: 0.85em;
    padding: 0px;
  }
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  .tc-item {
    font-size: 1.1em;
    padding: 0px;
  }
}

@media screen and (min-width: 1325px) {
  .tc-item {
    font-size: 1.1em;
    padding: 0px;
    }
  }


.chapter-name-tc {
  flex: fit-content;
 /* background-image: src('svgs/content-arrow.svg');
  background: url(../assets/svgs/content-arrow.svg) left center no-repeat;
  background-size: 30px;
  background-position-x: 18px;*/
  display: flex;
  z-index: 10;
  text-align: left;
}

@media screen and (max-width: 700px) {
  .chapter-name-tc {
    padding: 11px 5px 11px 15px;
    margin:  auto 0px auto 0px;
  }
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  .chapter-name-tc {
    padding: 12px 25px 12px 35px;
    margin:  auto 0px auto 0px;
  }
}

@media screen and (min-width: 1325px) {
  .chapter-name-tc {
    padding: 15px 25px 15px 35px;
    margin:  auto 0px auto 0px;
    }

  #appx-book-one .chapter-name-tc {
    padding: 0px 25px 0px 35px;
    font-size: 1.2em;

  }
  }



.word-count-tc {
  padding: 11px 35px 11px 0px;
  margin:  auto 0px auto 0px;
  color: grey;
  text-align: right !important;
  flex: fit-content;
  font-family: 'CooperLT';
}

#book-notes-list .word-count-tc {
  margin-top: 2px !important;
}

@media screen and (max-width: 700px) {
  .word-count-tc {
    padding: 13px 15px 13px 5px;
    margin:  auto 0px auto 0px;
  }
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  .word-count-tc{
    padding: 12px 35px 12px 0px;
    margin:  auto 0px auto 0px;
  }
}

@media screen and (min-width: 1325px) {
  .word-count-tc {
    padding: 15px 35px 15px 0px;
    margin:  auto 0px auto 0px;
    }
  }


  
  /* When you mouse over the navigation links, change their color */
  .overlay-tc a:hover, .overlay a:focus {
    color: inherit;
    font-weight: bolder;
    
  }



  /*Almost obsolte, maybe return to a bottom button?
  #tc-button {
    position: absolute;
    width: fit-content;
    margin: auto;
    bottom: 30px;
    left: 0;
    right: 0;
    transition: 0.3s;
    padding: 30px;
    padding-bottom: 30px;
    border-radius: 50px;
    background-color: white;
    padding-bottom: 70px;
    margin-bottom: -80px;
    box-shadow: 0 1px 15px rgba(85, 84, 84, 0.1);
    z-index: 30;
    display: none;
    margin: 20px auto 20px auto;
    width: 80%;
  }
  
  #tc-button:hover {
    bottom: 40px;
  }
  
  .tc-button-night {
    background-color:  #292a2d !important;
  }
  
  .tc-button-night:hover {
    background-color: #242529 !important;
    bottom: 40px !important;
  }
  
*/


/*This is for the link buttons at the bottom of the contents slide*/
.tc-button-row {
  display: flex;
  flex: row;
  align-items: stretch;
  justify-content: center;
  margin-top: 20px;
}


/*Gave up on this!
.dotted-line {
  width: 50%;
height: 1px;
align-content: center;
align-self: center;
border-top: gray;
  border-top-style: none;
  border-top-width: medium;
border-style: dotted;
  border-bottom-style: dotted;
border-bottom: none;
  border-bottom-width: medium;
border-width: 1px;
border-spacing: 1px;
display: none;
}

.magic-circle {
  width: 10px;
height: 18px;
background: #d4d1d1;
border: 1px grey;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
border-style: solid;
border-radius: 100px;
padding: 10px;
margin: auto;
  margin-right: auto;
margin-right: -15px;
display: none;
}

*/





/* -------------------------------------------------------------------------- */

/*	16. What is an Earthbook Overlay Curtain

/* -------------------------------------------------------------------------- */


#bottom-earthbook {
  background-color: var(--fainter-border-color); 
  color: var(--text-color);
  z-index: 21;
}


/* Table of Contents Menu (background) */
.overlay-earthbook {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  overflow-y: hidden;
  transition: 0.5s;
}


/* Position the content inside the overlay */
.overlay-content-earthbook {
  position: initial;
  /*top: 12%; /* 25% from the top */
   /* width: 65%; 100% width */
  text-align: center; /* Centered text/links */
  /*margin-top: 30px;  30px top margin to avoid conflict with the close button on smaller screens */
  /*padding: 20px;*/
  margin: auto; 
  display: flex;
  justify-content: center;
  flex-flow: column;
  height:100%;
  font-size: smaller;
}


#virtue-box {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  padding-bottom: 175px; 
  box-sizing: border-box;
  height: fit-content;
  width: 100%;
}


.virtue img {
  cursor: pointer;
}


.virtue {
  margin: auto; 
  display: flex;
  justify-content: center;
  flex-flow: column;
  flex: 50%;
  opacity: 0.7;

}



.virtue-desc {
  font-family: 'Mulish';
  text-align: center;
  color: var(--text-color);
  position: absolute;
  bottom: 290px;
  width: 80%;
  right: 0;
  left: 0;
  margin: auto;
  display: none;
  font-weight: 300;
 
}

#fore { opacity: 0;
  transition: 0.3s;
  transition-delay: 0.4s;}

#medium-message {
  position: absolute;
  right: 0;
  left:0;
  bottom: 130px;
  font-family: "CooperLT", serif;
  font-style: italic;
  opacity: 0;
  transition: 0.3s;
  transition-delay: 0.3s;

}




@media screen and (max-width: 700px) {
  
  .overlay-content-earthbook h1 {
    font-size: 1.8em;
  }

  .overlay-content-earthbook h3 {
    font-size: 1.1em;
  }



  .virtue-box-box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }

  #virtue-box-mobile {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    box-sizing: border-box;
    height: fit-content;
    width: 100%;
  }
    
    .overlay-content-earthbook {
    width: 90%;
}
/*
.virtue img {
  width: 90px;
}*/

.virtue {
  padding: 8px;
  height: 70px; 
}

.virtue-desc {
  bottom: 135px;
  width: 87%;
  font-size: 1.2em;
}

#medium-message {
  position: absolute;
  right: 0;
  left:0;
  bottom: 70px;
  font-size: 1.5em;
}


}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  
  .virtue-box-box {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
  }
  
  #virtue-box-mobile {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    padding-bottom: 140px; 
    box-sizing: border-box;
    height: fit-content;
    width: 100%;}

  .overlay-content-earthbook {
    width: 90%;
  }

  /*
  .virtue img {
    width: 82px;
    opacity: 1;
  }*/
  
  .virtue {
    padding: 13px;
 /*   width: 100px;
    height: 110px;*/

  } 

  .virtue-desc {
    bottom: 300px;
    width: 75%;
    font-size: 2.1em;
  }

  #medium-message {
    font-size: 1.8em;

}
}


@media screen and (min-width: 1325px) {

  .virtue-box-box {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
  }
  
  #virtue-box-mobile {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    padding-bottom: 175px; 
    box-sizing: border-box;
    height: fit-content;
    width: 100%;}

    
  .overlay-content-earthbook {
    width: 84%;
  }

  .virtue img {
  /*  width: 135px;*/
    opacity: 1;
  }
  
  .virtue {
    padding: 15px;
 /*   width: 170px;
    height: 150px;*/
  } 

  .virtue-desc {
    bottom: 300px;
    width: 65%;
    font-size: 1.6em;
  }

  #medium-message {
    font-size: 1.9em;
}

}


.virtue-desc a {
  text-decoration: underline;
}

.virtue-desc a:hover {
  font-weight: 500;
}


/*

.virtue:hover > .virtue-desc, .virtue:active > .virtue-desc
 {
  opacity: 1;
}*/


.virtue:hover, .virtue:active
 {
 /* width: 135px;*/
  opacity: 1;
  transition: 0.5s;
}




/* -------------------------------------------------------------------------- */

/*	17. Ecological Accounting Overlay Curtain

/* -------------------------------------------------------------------------- */


#eco-curtain2 {
  background-color: var(--fainter-border-color);  
  color: var(--text-color);
  z-index: 21;
}


/* Table of Contents Menu (background) */
.eco-overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  overflow-y: hidden;
  transition: 0.5s;
}


/* Position the content inside the overlay */
.overlay-content-eco {
  position: initial;
  /*top: 12%; /* 25% from the top */
   /* width: 65%; 100% width */
  text-align: center; /* Centered text/links */
  /*margin-top: 30px;  30px top margin to avoid conflict with the close button on smaller screens */
  /*padding: 20px;*/
  margin: auto; 
  display: flex;
  justify-content: center;
  flex-flow: column;
  height:100%;
  text-align: center;

}

.eco-header {
  font-family:  'CooperLt', serif;
  text-align: center;
}

.eco-text {
  font-family: 'CooperLt', serif;
  font-weight: 300;
font-size: 1.1em;
text-align: center;
width: 100%;
margin: 20px auto 20px auto;
}

.eco-text a {
  text-decoration: underline;
}

.eco-medium {
  font-family: 'CooperLt', serif;
  font-weight: 300;
  font-style: italic;
text-align: center;
width: 100%;

}



@media screen and (max-width: 700px) {
  
  .overlay-content-eco {
    width: 90%;
}

.eco-header  {
  font-size: 1.7em;
  }

.eco-text {
font-size: 1em;
padding-bottom: 15px;
}


.eco-medium {
  font-size: 1.2em;
  margin: 20px auto 20px auto;
}
}


@media screen and (min-width: 700px) and (max-width: 1324px) {
  
  .overlay-content-eco {
    width: 80%;
  }

  .eco-header  {
    font-size: 3.2em;
    padding-bottom: 17px;
    }

    .eco-text {
      font-size: 1.7em;
      padding-bottom: 35px;
      }

      .eco-medium {
        font-size: 1.3em;
        margin: 27px auto 20px auto;
      }
      

}


@media screen and (min-width: 1325px) {

  .overlay-content-eco {
    width: 75%;
  }

  .eco-header  {
    font-size: 4em;
padding-bottom: 20px;
    }

    .eco-text {
      font-size: 2em;
      padding-bottom: 35px;
      }

      .eco-medium {
        font-size: 1.9em;
        margin: 40px auto 20px auto;
      }
      
}


/*Carbon Badge */

#wcb.wcb-d #wcb_a {
  color: #2e2e2e !important;
background: #27ad37 !important;
border-color: #00a112 !important;
}

#wcb #wcb_a,
#wcb #wcb_g {
  border: 0.2em solid #2cb03c !important;
}

#wcb.wcb-d #wcb_2 {
  color: grey !important;
}



/* -------------------------------------------------------------------------- */

/*	18. Sepia, Contrast, Brightness Sliders

    This shows up on the settings page.
    Unfortunately, it only works for one page at a time.

/* -------------------------------------------------------------------------- */


#containerSepia {
    width: 100%;
    height: 100%;
    z-index: -10;
    position: absolute;
    background-color: var(--background-color);
    top: 0;
    overflow: hidden;
  }

  #containerContrast {
    width: 100%;
    height: 100%;
    z-index: -10;
    position: absolute;
    background-color:var(--background-color);
    top: 0;
    overflow: hidden;
  }


  #containerBrightness {
    width: 100%;
    height: 100%;
    z-index: -10;
    position: absolute;
    background-color: var(--background-color);
    top: 0;
    overflow: hidden;
  }



#range-scale {
-webkit-appearance: none;
background: #5c5c5c;
height: 4px;
outline: none;
cursor: pointer;
margin-top: 7px;
margin-bottom: 14px;
border-radius: 8px;
border-width: 1px;
border-color: #8b8a8a;
border-style: solid;
margin-right: auto;
margin-left: auto;
  }

  @media screen and (max-width: 699px) {

    #range-scale { 
      width: 80%;
    }

  }

  @media screen and (min-width: 700px) and (max-width: 1324px) {

    #range-scale { 
      width: 70%;
    }

  }

  @media screen and (min-width: 1325px) {

    #range-scale { 
      width: 30%;
    }

  }


  #brightness-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
       
  }


/* -------------------------------------------------------------------------- */

/*	19. Dark Mode Toggle Switch

    This shows up on the settings page.
    Carries over for all pages once set
    Arg... can't figure out how to change the sun and move graphics.

/* -------------------------------------------------------------------------- */



/* This toogle is not working 

label.toggle {
  width:140px;
  height:60px;
  position: relative;
  display: block;
  background: #ebebeb;
  border-radius: 200px;
  box-shadow: inset 0px 4px 12px rgba(0,0,0,0.4), inset 0px -5px 15px rgba(255,255,255,0.4);
  cursor: pointer;
}

label.toggle:after  {
  content: "";
  width:52px;
  height: 52px;
  position: absolute;
  top:4px;
  left:5px;
  background: linear-gradient(180deg,#ffcc89,#d8860b);
  border-radius: 180px;
  box-shadow: 1px 5px 11px rgba(0,0,0,0.2);
}


 input.darkmoder {
  width: 0;
  height: 0;
  visibility: hidden;
}

input:checked + label {
  background: #242424;
}
input:checked + label:after {
  left:135px;
  transform: translateX(-100%);
  background: linear-gradient(180deg,#777,#3a3a3a);
}
label.toggle, label.toggle:after {
  transition: 0.3s
}

label.toggle:active:after{ 
  width: 100px; 
}

input:checked + label.toggle + .background {
  background:#242424;
}


label.toggle svg {
  position: absolute;

top: 12px;
z-index: 100;

}
label.toggle svg.sun {
  left:12px;
  fill:#fff;
  transition: 0.3s;
  width: 35px;
  height: 35px;
}
label.toggle svg.moon {
  left:95px;
  fill:#7e7e7e;
  transition: 0.3s;
  width: 33px;
  height: 33px;
}
input:checked + label.toggle svg.sun {
  fill:#7e7e7e;
}
input:checked + label.toggle svg.moon {
  fill:#fff;
}


#smart-button-container {
  background-color: var(--deeper-accent-color) !important;

}

.paypal-button-tagline {
  display: none !important;
}

*/

.this-one input  {
  text-align: center;
}

.this-one input  {
-moz-appearance: none;
    -webkit-appearance: none;
    align-items: center;
    background-color: #fff;
    border: 1px solid  rgb(163, 163, 163);
    color: #363636;
    display: inline-flex;
    font-size: 15px;
    height: 28px; 
    line-height: 20px;
    position: relative;
    vertical-align: top;
    box-shadow: inset 0 1px 2px hsla(0,0%,4%,.1);
    max-width: 100%;
    width: 100%;
    color: #363535;
  
    transition: 0.3s;
    border-radius: 25px;
    height: 42px;
    z-index: 10;
    margin-top: 5px;
    width: 80%;
    padding: 0px 0px 0px 15px;

}

fieldset {margin-top: 50px;
  font-family: 'Mulish';
  display: none;}




/*This dark toggle is*/

.compro-toggle {
  font-family: 'Mulish' !important;
  font-size: 1.23em;
}

/*  Can't figure out how to get these settings to overide the default

[part="darkLabel"]::before {
  filter: var(--dark-mode-toggle-icon-filter, none);
  background-image: var(--dark-mode-toggle-dark-icon, url("https://googlechromelabs.github.io/dark-mode-toggle/demo/moon.png"));
  height: 30px !important;
  width: 30px!important;
  background-size: contain!important;
  margin-left: 20px!important;
}

[part="lightLabel"]::before {
  background-image: var(--dark-mode-toggle-light-icon, url("https://googlechromelabs.github.io/dark-mode-toggle/demo/sun.png"));
  height: 40px;
  width: 40px;
  background-size: contain;}

  form:nth-child(2) > fieldset:nth-child(1) > label:nth-child(5) {padding-left: 20px;
  
  }


 [part="darkLabel"]  {
  margin-left: 20px !important;
  
 }

 label  {
  margin: 20px !important;}
 
*/


/* -------------------------------------------------------------------------- */

/*	20. Underdevelopment

    Not yet categorized and finalized CSS

/* -------------------------------------------------------------------------- */




#up-arrow {
  text-align: center;
  width: 140px;
  height: 42px;
  margin-top:-41px;
  background: url(../assets/svgs/up-arrow-dark.svg) center no-repeat;
  background-size: 140px;
  margin-left: auto;
  margin-right: auto;
}



  
  .footer-function {
    display: flex;
    flex-direction: column;
    margin: auto;
    font-family: 'Mulish';
    padding: 0px;
    border-top-width: 1px;
    border-color: inherit;
    border-style: dotted;
    cursor: pointer;
    border-bottom: none;
    border-right: none;
    border-left: none;
    display: flex;
    border-top-color: grey;
    cursor: pointer;
   
  }
  
  
  @media screen and (max-width: 700px) {
  .footer-function {
    width: 90%; }
  }
  
  
      @media screen and (min-width: 700px) and (max-width: 1324px) {
        .footer-function {
        width: 77%;
       }
      }
  
      @media screen and (min-width: 1325px) {
        .footer-function {
          width: 50%;
          margin: auto;
       }
      }

  .footer-function-main {
        display: flex;
        flex-direction: row;
        margin: auto;
        width: 100%;
        padding-left: 15px;
        background-color:  var(--header-footer);
  }
    
  .footer-function-item p {
    font-variant-caps: all-petite-caps; 
    color:grey; 
    font-size: 1.1em; 
    padding-left:7%; 
    width: 100%;
    letter-spacing: 3px
  }

  .footer-function-item-icon {
    margin: auto 0px auto auto;
    padding-right: 7%;
    letter-spacing: 3px;
  }

  .footer-function-item-icon i {
    width:22px; 
    height:22px;
    display: inline-block;
    background-size: 22px;
    margin-bottom: -3px;
    margin-right: 2px;
  }



  #footer-function-reveal-code {
    margin: auto;
    font-family: 'Mulish';
    width: 100%;
    padding-left: 5%;
    line-height: 1.6em;
    padding: 0px 5% 0px 5%;
    transition: 0.5s; 
  }

  #footer-function-reveal-code a {
    color: grey;
  }


  
  
  
  @media screen and (max-width: 700px) {
  .footer-function {
    width: 90% }
  }
  
  
      @media screen and (min-width: 700px) and (max-width: 1324px) {
        .footer-size {
        width: 70%
       }
      }
  
      @media screen and (min-width: 1325px) {
        .footer-function {
          width: 50%;
          margin: auto;
       }
      }
  
  

      /*  COMENTS */


/* -------------------------------------------------------------------------- */

/*	20. COmmentics Overlay

  Comes in from Right.

/* -------------------------------------------------------------------------- */



#bottom-comments-overlay {
  background-color: var(--fainter-border-color); 
  color: inherit;
  z-index: 26;
}


/* Table of Contents Menu (background) */
.comments-overlay {
  height: 0%;
  width: 100%;
  position: fixed; /* Stay in place */
  z-index: 21; /* Sit on top */
  left: 0;
  bottom: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}


/* Position the content inside the overlay */
.comments-overlay-content {
  position: initial;
  text-align: center; /* Centered text/links */
   /*margin-top: 30px; 30px top margin to avoid conflict with the close button on smaller screens */
   font-family: 'CooperLt', serif;
   /*display: flex;
  
  justify-content: center;
  flex-flow: column;*/
  padding-top: 50px;
  height:100%;
  margin: auto;
}


.comments-overlay-content p {
  font-family: "Mulish", Arial, Helvetica, sans-serif;
  font-size: smaller;
}


@media screen and (max-width: 700px) {
  .comments-overlay-content {
    width: 85%;
    font-size: 0.9em;
    /*margin-top: 6%;*/
}
}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  .comments-overlay-content {
    width: 65%;
    font-size: 0.9em;
    /*margin-top: 2%;*/
}
}

@media screen and (min-width: 1325px) {
    .comments-overlay-content {
      width: 69%;
      margin: auto;
    }
}






/*--------------------------------------
GUIDED TOUR---*
--------------------------------------*/



/* The modal background */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 30; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scrolling if needed */
  background-color: var(--modal-background);
}
  
.tour-content {
  text-align: center;
  transform: translateY(-50%);
  margin: auto;
}

@media screen and (max-width: 700px) {
  .tour-content {
    width: 90%;
    margin-top: 80%;

  }
}
@media screen and (min-width: 701px) and (max-width: 1324px) {
    .tour-content {
      width: 80%;
      margin-top: 40%;

    }
  }

  @media screen and (min-width: 1325px) {
    .tour-content {
      width: 80%;
      margin-top: 25%;

    }
  }



.close {
  color: var(--subdued-text);
  font-size: 28px;
  font-weight: bold;
  position: fixed;
  top: 16px;
  right: 24px;
  z-index: 9999;
}
.close:hover,
.close:focus {
  color:var(--h1);
  text-decoration: none;
  cursor: pointer;
}
.blur {
  filter: blur(5px);
  pointer-events: none;
}
.next {
  background-color: green;
  border: none;
  color: #fff;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 5px 2px;
  border-radius: 5px;
  cursor: pointer;
}

.next:hover {
  background-color: #0f6a02;
}

.back {
  background-color: rgb(80, 80, 80);
  border: none;
  color: #fff;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 5px 2px;
  border-radius: 5px;
  cursor: pointer;
}

.back:hover {
  background-color: rgb(50, 50, 50);
}

.modal-description {
  font-family:'Mulish', sans-serif;
  text-align:center;
  color:var(--h1);
  padding:15px;
}
  
.modal-header {
  font-family: 'CooperLt', serif;
  color:var(--h1);
  margin-top: 15px;
}

#underlayer {transition: 0.5s;}



.tour-image {
  margin: auto; 
  display: flex;
  justify-content: center;
  flex-flow: column;
  flex: 50%;
  opacity: 0.7;
margin: auto;

}

.tour-image img {
  height: inherit;
}


@media screen and (max-width: 700px) {
  
  .tour-image {
    padding: 8px;
    height: 120px;  
  }

  .modal-header {
    font-size:2.3em;
  }
  .modal-description {
    font-size:1.2em;
  }

}

@media screen and (min-width: 700px) and (max-width: 1324px) {
  
  .tour-image {
    padding: 8px;
    height: 200px;  
  }

  .modal-header {
    font-size:2.9em;
  }
  .modal-description {
    font-size:1.5em;
  }

}


@media screen and (min-width: 1325px) {


  .tour-image {
    padding: 28px;
    height: 270px;  
  }

  .modal-header {
    font-size:3.2em;
  }
  .modal-description {
    font-size:1.7em;
  }

}

.java-link {
  cursor:pointer; 
  border-bottom: grey 1px dashed;
}

.java-link:hover {
  cursor:pointer; 
  border-bottom: grey 1px solid;}


  /*--------------------------------------
  INTRO NOTICE
  -----------------------*/


  #chap-notice .java-link {
    cursor:pointer; 
    border-bottom: var(--true) 1px dashed;
    color: var(--true);
  }
  
  #chap-notice  .java-link:hover {
    cursor:pointer; 
    border-bottom: 1px solid;
  }


    #chap-notice {
      display: none;
      width:100%;
      height:0px;
      background-color: #458645;
      border-radius: 10px;
      margin-bottom: 20px;
      transition: height 1s; /* Add the height transition for smooth animation */
      position: fixed;
      bottom: 30px;
      z-index: 21; /* This ensures the palette is above other page content */
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
    }

    #chap-notice-text {
      font-family: 'Mulish', sans-serif;
      font-size:1.1em;
      padding: 25px;
      color: var(--true);
      line-height: 1.3em;

    }

    .chapt-notice-text a {
      color: var(--true);
    }


    #close-notice {
      
      width:20px;
      height:20px;
      margin-left: auto;
      margin-bottom: -24px;
      display:block;
      padding: 0.5em;
      font-size:1.5em;
      cursor:pointer;
      color:  var(--fainter-border-color);
    }


    #registration-footer {
      z-index: 18 !important;
    }