body {
	font-family: sans-serif;
	font-size: 18px;
	background-color: #ccd9c8;
	color: #2c3635;
   & a {
      &:link {
         color: #0010A0;
         font-style: bold;
      }
      &:visited { 
         color: #000550; 
      }
   }
   & > div.body {
      padding-top: 20px;
      & > p.navBar a {
         border-left: 2px white solid;
         border-top: 2px white solid;
         background-color: #d8e2d5;
         color: #0010A0;
         border-bottom: 2px black solid;
         border-right: 2px black solid;
         min-width: 100px;
         min-height: 20px;
         text-align: center;
         text-decoration: none;
         display: inline-block;
         &:hover {
            cursor: pointer;
            background-color: #CCD9C8;
         }
         &.chapterList, &.pageList {
            min-width: 200px;
         }
         &.disabled {
            border-left: 2px grey solid;
            border-top: 2px grey solid;
            background-color: #63725F;
            &:hover {
               cursor: not-allowed;
            }
         }
         &:not(.disabled):focus {
            border-left: 2px black solid;
            border-top: 2px black solid;
            background-color: #9EB198; 
            border-right: 2px white solid;
            border-bottom: 2px white solid;
         }
         &.backch, &.backpg, &.forwpg, &.forwch {
            min-width: 98.5px;
         }
      }
      & > p > picture > img {
         max-width: 100%;
         min-width: 80%;
         border: 4px solid white;
      }
      & > p > video{
         border: 4px solid white;
      }
   }
   & > details.side_menu {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 1;
      &[open] {
         min-width: 160px;
         height: auto;
         border-right: 2px black solid;
         background-color: #99a296;
      }
      & > div.sideMenu-overall {
         & > div.sideMenu-popout {
            counter-increment: sideMenuItems 1;
            --sideMenuItems: counter(sideMenuItems);
            width: 160px;
            position: relative;
            & > a {
               color: #2c3635;
               text-decoration: none;
            }
            & > div.rarr {
               display: inline-block;
               position: absolute;
               left: 140px;
            }
            & > ul { display:none; }
            &:hover {
               background-color: #BFF3AF;
               & > ul {
                  display: inline-block;
                  padding-left: 0;
                  position: absolute;
                  padding:0;
                  width: 160px;
                  left: 160px;
                  top: -20px;
                  border-left: 2px white solid;
                  border-top: 2px white solid;
                  background-color: #99a296;
                  border-bottom: 2px black solid;
                  border-right: 2px black solid;
                  list-style-type: none;
                  & > a {
                     color: #2c3635;
                     text-decoration: none;
                     & > li {
                        padding-left: 3px;
                        &:hover { background-color: #BFF3AF; }
                     }
                  }
               }
            }
         }
      }
      & > summary {
         padding-left: 10px;
         padding-top: 5px;
      }
      & > form > input#dark-mode {
         color: #9e9ea0;
         background-color: #060509;
         border-top: 2px solid #a288f7;
         border-left: 2px solid #a288f7;
         border-bottom: 2px solid #9e9ea0;
         border-right: 2px solid #9e9ea0;
         display: inline-block;
         width: 100%;
      }
      & > form > input#last-read {
         color: #2c3635;
         background-color: #ccd9c8;
         border-top: 2px solid #2c3635;
         border-left: 2px solid #2c3635;
         border-bottom: 2px solid #586c6a;
         border-right: 2px solid #586c6a;
         display: inline-block;
         width: 100%;
      }
   }
   &:has(details.side_menu[open]) div.body { margin-left: 160px; }
}

/* Easter Egg for Blue */
@media only screen and (max-height: 240px) and (min-height: 240px) and (max-width: 320px) and (min-width: 320px) {
   body {
      filter: sepia() hue-rotate(180deg) saturate(800%) brightness(50%);
   }
}