/*LIGHT STYLE SHEET*/

/* light.css: 👉 dark-on-light */


   :root {
    --text-color: #060606;
    --background-color: rgb(250, 250, 250) ; /*button hover*/
    --link-color:  #030303 ;
    --pre-link-color:  #3c3c3c ;
    --nav-bar-accent: rgb(244, 242, 242); /*OBSOLETE? navbar, footer, button color*/
    --deeper-accent-color: rgb(225, 225, 225) ; /*rgb(235, 235, 235) main chart hover, top menu button backgrounds, footer bottom bottom*/ 
    --thin-border-color: rgb(163, 163, 163); /*border color for almost everything*/
    --fainter-border-color:  rgb(208, 207, 207); /*border color for the menu buttons*/
    --element-shadow: 0 1px 15px rgba(7, 7, 7, 0.15 );  /*whenever a shadow is added*/
    --drop-cap: rgb(63, 63, 63);
    --header-footer: #e7e7e7;
    --slider: rgb(228, 228, 228);
    --strong-border: rgb(185, 188, 209);
    --modal-background: rgba(255, 255, 255, 0.735);
    --opposite: black;
    --true: white;
    --highlight-modal: rgba(193, 193, 193, 0.856);


    --settings-background: rgba(222, 222, 222, 0.871) ;
    --side-overlays: rgb(225, 225, 225);
    --top-header: #fff;  
    --h1: black;
    --header-accent: rgb(133, 133, 133);
    --progress-track-color: #d3d3d3;


   }
   

#main-title {
  text-shadow: 0 0 3px #ffffff;
}


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

#book-header-logo {  
  background: url(../assets/svgs/my-book-header-logo-day.svg) center no-repeat;
  width: 100%;
  background-size: contain;
  transition: 0.3s;
  filter: brightness(75%);
  position: absolute;
 
  }


#top-bookplate {
  text-shadow: 0 0px 4px #ffffff;
}

#bookplate-img {
  background: url(../assets/svgs/tractatus-mandala-full-black.svg) center no-repeat;
  width: 100%;
  background-size: contain;
  transition: 0.3s;
}


#table-of-contents {
  background: url(../assets/svgs/tractatus-mandala-full-light-grey.svg) center no-repeat;
  background-size: contain;
  background-color: var(--slider); 
}

#booknotes-curtain {
  background: url(../assets/svgs/tractatus-mandala-full-light-grey.svg) center no-repeat;
  background-size: contain;
  background-color: var(--slider); 
}

#book-box a {  

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

#book-box a:hover {  

  background: url(../assets/svgs/content-arrow-45.svg) left center no-repeat var(--deeper-accent-color);
  background-size: 30px;
  background-position-x: 18px;
  ;
}


/*CHAPTERS*/

.background-000 {
  background: url(../assets/svgs/00-white.svg) no-repeat center;
  background-size: contain;
}

.background-00 {
  background: url(../assets/svgs/tractatus-mandala-full-grey-grey.svg) no-repeat center;
  background-size: contain;
}

.background-0 {
  background: url(../assets/svgs/00-preamble-white.svg) no-repeat center;
  background-size: contain;
}

.background-1 {
  background: url(../assets/svgs/01-imagine-white.svg) no-repeat center;
  background-size: contain;
}

.background-2 {
  background: url(../assets/svgs/02-plastic1-white.svg) no-repeat center;
  background-size: contain;
}

.background-3 {
  background: url(../assets/svgs/03-stellar-white.svg) no-repeat center;
  background-size: contain;
}

.background-4 {
  background: url(../assets/svgs/04-patterns-white.svg) no-repeat center;
  background-size: contain;
}

.background-5 {
  background: url(../assets/svgs/05-kincentric-white.svg) no-repeat center;
  background-size: contain;
}

.background-6 {
  background: url(../assets/svgs/06-nature-white.svg) no-repeat center;
  background-size: contain;
}

.background-7 {
  background: url(../assets/svgs/07-earthen-white.svg) no-repeat center;
  background-size: contain;
}

.background-8 {
  background: url(../assets/svgs/08-cycles-white.svg) no-repeat center;
  background-size: contain;
}

.background-9 {
  background: url(../assets/svgs/09-energy-white.svg) no-repeat center;
  background-size: contain;
}

.background-10 {
  background: url(../assets/svgs/10-matter-white.svg) no-repeat center;
  background-size: contain;
}

.background-11 {
  background: url(../assets/svgs/11-diversification-white.svg) no-repeat center;
  background-size: contain;
}

.background-12 {
  background: url(../assets/svgs/12-awareness-white.svg) no-repeat center;
  background-size: contain;
}

#up-arrow {
  background: url(../assets/svgs/up-arrow-light.svg) center no-repeat;
  background-size: 140px;

}

.bullet {
  background: url(../assets/svgs/content-arrow-45.svg) left center no-repeat;
background-size: contain;
}

#reg-up-button {
  background: url(../assets/svgs/up-reg-arrow-light.svg) center no-repeat;
  background-size: contain;
}

.registration-footer-holder {
  background: url(webp/earthen-subscription-background-light.webp) top center, var(--top-header);
  background-repeat: no-repeat;
  background-size: cover;
  }
/*
body {
  background-color: rgb(250, 250, 250) !important;
  color: #202124 !important;
}

#underlayer {   /*THis enables sepia/contrast/brightness
    background-color: rgb(252, 251, 251);
}*/


/*NAVBAR TOP

#earthbook-navbar {

  background-color: rgb(244, 242, 242)  !important;
  border-color: rgb(163, 163, 163)  !important;
  color:  #202124  !important;
  box-shadow: 0 4px 15px rgba(85, 84, 84, 0.3)  !important;

}


/*

#settings-menu {
  background: var(--deeper-accent-color) !important;
  box-shadow: var(--element-shadow) !important;
  border: solid 1px var(--fainter-border-color) !important;
}

#settings-menu:hover {
  background: var(--background-color) !important;
  box-shadow: var(--element-shadow) !important;
}

#share-menu {
  background: var(--deeper-accent-color) !important;
  box-shadow: var(--element-shadow) !important;
  border: solid 1px var(--fainter-border-color) !important;
}

#share-menu:hover {
  background: var(--background-color) !important;
  box-shadow: var(--element-shadow) !important;
}


#right-close-button {
  border: solid 1px gray !important;
  background-color: white !important;
  box-shadow: 0 1px 15px rgba(85, 84, 84, 0.1) !important;
}






/* light.css


   
/* light.css 
--icon-filter_hover: invert(60%);*/