body { font-family: sans-serif; font-size: 18px; background-color: #ccd9c8; color: #2c3635; }

body a:link { color: #0010A0; font-style: bold; }

body a:visited { color: #000550; }

body > div.body { padding-top: 20px; }

body > div.body > 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; }

body > div.body > p.navBar a:hover { cursor: pointer; background-color: #CCD9C8; }

body > div.body > p.navBar a.chapterList, body > div.body > p.navBar a.pageList { min-width: 200px; }

body > div.body > p.navBar a.disabled { border-left: 2px grey solid; border-top: 2px grey solid; background-color: #63725F; }

body > div.body > p.navBar a.disabled:hover { cursor: not-allowed; }

body > div.body > p.navBar a: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; }

body > div.body > p.navBar a.backch, body > div.body > p.navBar a.backpg, body > div.body > p.navBar a.forwpg, body > div.body > p.navBar a.forwch { min-width: 98.5px; }

body > div.body > p > picture > img { max-width: 100%; min-width: 80%; border: 4px solid white; }

body > div.body > p > video { border: 4px solid white; }

body > details.side_menu { position: absolute; top: 0px; left: 0px; z-index: 1; }

body > details.side_menu[open] { min-width: 160px; height: auto; border-right: 2px black solid; background-color: #99a296; }

body > details.side_menu > div.sideMenu-overall > div.sideMenu-popout { counter-increment: sideMenuItems 1; --sideMenuItems: counter(sideMenuItems); width: 160px; position: relative; }

body > details.side_menu > div.sideMenu-overall > div.sideMenu-popout > a { color: #2c3635; text-decoration: none; }

body > details.side_menu > div.sideMenu-overall > div.sideMenu-popout > div.rarr { display: inline-block; position: absolute; left: 140px; }

body > details.side_menu > div.sideMenu-overall > div.sideMenu-popout > ul { display: none; }

body > details.side_menu > div.sideMenu-overall > div.sideMenu-popout:hover { background-color: #BFF3AF; }

body > details.side_menu > div.sideMenu-overall > div.sideMenu-popout:hover > 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; }

body > details.side_menu > div.sideMenu-overall > div.sideMenu-popout:hover > ul > a { color: #2c3635; text-decoration: none; }

body > details.side_menu > div.sideMenu-overall > div.sideMenu-popout:hover > ul > a > li { padding-left: 3px; }

body > details.side_menu > div.sideMenu-overall > div.sideMenu-popout:hover > ul > a > li:hover { background-color: #BFF3AF; }

body > details.side_menu > summary { padding-left: 10px; padding-top: 5px; }

body > details.side_menu > 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%; }

body > details.side_menu > 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%; }

body: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%); } }