/* Global Variables */
@media (prefers-color-scheme: light){
	:root,
	::backdrop{
		/* Fonts */
		--heading-font: "Bebas Neue", san-serif;
		--body-font: "Times New Roman", serif;
		--monospace-font: "Monaco", monospace;
		--standard-border-radius: 10px;
		
		/* Light Mode Colors */
			color-scheme: light;
				--Main-BG: #E6E6E6;
				--Header-BG: #D2F4BE;
				--Section-BG: #FFFFFF;
				--Header-Button: #C943D6;
				--Current-Button: #290A10;
				--BookNav-Button: #3E0D73;
				--Hover-Button: #892092;
				--Current-Hover: #4D4D4D;
				--BookNav-Hover: #242D42;
				--Header1-Font: #0A290A;
				--Header2-Font: #0F3E0F;
				--Header3-Font: #145214;
				--Header4-Font: #000000;
				--Main-Font: #000000;
				--Accents: #D9264A;
				--CharacterA-Border: #FFD700;
				--CharacterB-Border: #C0C0C0;
				--CharacterC-Border: #CE8946;
				--CharacterD-Border: #90EE90;
	}
	
	/* List Prep for Navigation Menus */
	ul.navheader, ul.navfooter, ul.booknav{
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
	}

	/* Styling for Header Navigation Menu */
	ul.navheader {
		background-color: var(--Header-BG);
		border-top: 2px solid var(--Accents);
		border-bottom: 2px solid var(--Accents);
		position: sticky;
		top: 1px;
		margin-bottom: 10px;
	}

	/* Sizing for Header Navigation Buttons */
	li.navheader, li.dropdown {
		margin: 10px 10px;
		width: 150px;
	}
	
	/* Styling for Header Navigation Buttons */
	li.navheader a, li.dropdown a, .dropbtn {
		display: block;
		color: var(--Accents);
		border-left: 3px solid var(--Accents);
		border-right: 3px solid var(--Accents);
		text-align: center;
		text-decoration: none;
		padding: 5px 5px;
	}

	/* Styling for the Dropdown Buttons */
	.dropbutton {
		text-decoration: none;
		background-color: var(--Header-BG);
		border-left: 2px solid var(--Accents);
		border-right: 2px solid var(--Accents);
		margin-top: 5px;
		display: block;
	}

	/* Styling for Hover Behavior for Navigation Buttons */
	.navheader a:hover, .dropdown a:hover, .dropbutton:hover, .navfooter a:hover {
		background-color: var(--Accents);
		box-shadow: inset 2px 0 2px var(--Header-BG), inset -2px 0 2px var(--Header-BG);
		color: #FFF;
	}

	/* Styling for Active Behavior for Navigation Buttons */
	.navheader a:active, .dropdown a:active, .dropbutton:active, .navfooter a:active {
		background-color: #FFD700CC;
		box-shadow: inset 1px 1px 3px #000A, inset -1px -1px 3px #000A;
	}

	/* Hiding Dropdown Buttons */
	.dropdown-content {
		display: none;
		position: absolute;
		margin-left: 10px;
		width: 130px;
	}

	/* Displaying Dropdown Buttons */
	.dropdown:hover .dropdown-content {
		display: block;
	}

	/* Styling for Current Page Buttons at Child Page */
	li.dropdown a[type="currentchild"]{
		background-color: var(--Current-Button);
		color: #FFF;
		box-shadow: inset 2px 0 2px var(--Header-BG), inset -2px 0 2px var(--Header-BG);
	}

	/* Styling for Hover Behavior for Current Page Buttons */
	li.dropdown a[type="currentchild"]:hover{
		background-color: var(--Current-Hover);
		color: #FFF;
	}
	
	/* Styling for Active Behavior for Current Page Buttons */
	li.dropdown a[type="currentchild"]:active {
		background-color: #00000080;
		color: #FFFFFF;
	}

	/* Styling for Copyright Notice */
	.copynote {
		text-align: center;
		color: var(--Main-Font);		
		font-family: var(--body-font);
		font-size: 10px;
	}
	
	/* Styling for Footer Navigation Menu */
	ul.navfooter{
		list-style-type: none;
		width: 60%;
		margin: 0;
		margin-left: 20%;
		padding: 0;
		display: flex;
		justify-content: center;
		border-top: 1px solid var(--Accents);
		border-bottom: 1px solid var(--Accents);
		background-color: var(--Header-BG);
		}
	
	/* Sizing for Footer Navigation Buttons */
	li.navfooter {
		margin: 5px 5px;
		width: 100px;
	}
	
	/* Styling for Footer Navigation Buttons */
	li.navfooter a {
		display: block;
		text-decoration: none;
		border-left: 2px solid var(--Accents);
		border-right: 2px solid var(--Accents);
		text-align: center;
		font-size: .75rem;
		color: var(--Accents);
		padding: 2px 2px;
	}

	/* Styling for Book Navigation Menu */
	ul.booknav{
		width: 80%;
		margin-left: 10%;
		border-top: 2px solid var(--Accents);
		border-bottom: 2px solid var(--Accents);
		background-color: var(--Header-BG);
		padding-top: 5px;
		padding-bottom: 5px;
	}

	/* Sizing for Book Navigation Buttons */
	.navbutton{
		margin-right: 5px;
		width: 125px;
	}
	
	/* Styling for Book Navigation Buttons */
	li.navbutton a {
		display: block;
		border-left: 2px solid var(--Accents);
		border-right: 2px solid var(--Accents);
		text-align: center;
		padding: 10px 5px;
		font-family: var(--heading-font);
		font-size: .75rem;
		text-decoration: none;
		color: var(--Accents);
	}

	/* Styling for Hover Behavior for Book Navigation Buttons */
	li.navbutton a:hover{
		background-color: var(--BookNav-Hover);
		color: #FFFFFF;
		box-shadow: inset 2px 0 2px var(--Header-BG), inset -2px 0 2px var(--Header-BG);
	}
	
	li.navbutton a:active{
		background-color: #242D4280;
	}
	
	/* Styling for Light/Dark Toggle */
	.toggle-container{
		color: var(--Accents);
		position: absolute;
		top: 0;
		right: 25px;
		cursor: pointer;
		border: 1px solid var(--Accents);
	}
	
	/* Styling for Headers */
	header{
		margin-inline: auto;
		padding: 10px;
		width: 60%;
		background-color: var(--Section-BG);
		border-top: 5px solid var(--Accents);
		border-bottom: 5px solid var(--Accents);
		margin-bottom: 1rem;
		box-shadow: 0 2px 2px var(--Header-BG), 0 -2px 2px var(--Header-BG), inset 0 2px 2px var(--Header-BG), inset 0 -2px 2px var(--Header-BG);		
	}

	/* Styling for h1, h2, h3 Tier Headers */
	h1, h2, h3{
		font-family: var(--heading-font);
		color: var(--Header1-Font);
		justify-content: center;
		text-align: center;
		border-left: 3px solid var(--Accents);
		border-right: 3px solid var(--Accents);
		margin-left: 10%;
		margin-right: 10%;
	}
	
	h2{
		margin-left: 15%;
		margin-right: 15%;
	}
	
	h3{
		margin-left: 20%;
		margin-right: 20%;
	}

	/* Styling for Section Backgrounds */
	section{
		margin-inline: auto;
		margin-top: 1rem;
		margin-bottom: 1rem;
		padding: 0.5rem;
		background-color: var(--Section-BG);
		border-top: 5px solid var(--Accents);
		box-shadow: 0 2px 2px var(--Header-BG), 0 -2px 2px var(--Header-BG), inset 0 2px 2px var(--Header-BG), inset 0 -2px 2px var(--Header-BG);
		border-bottom: 5px solid var(--Accents);
	}

	/* Management for Objects in Main Body */
	main *{
		margin-inline: auto;
		max-width: 75%;
		font-family: var(--body-font);
		color: var(--Main-Font);
		text-align: justify;
		text-indent: 2rem;
		
	}
	
	/* Table Styling, not used but here if I need to add anything */
	table {
	}

	/* Table Cell Styling */
	th, td {
		text-align: center;
		text-indent: 0;
		padding: 10px 10px
	}
	
	/* Styling for h4 Tier Headers */
	h4{
		font-family: var(--heading-font);
		color: var(--Header4-Font);
		text-align: center;
		text-indent: 0;
		font-size: 25px;
		margin-top: 0.5rem;
		margin-bottom: 10px;
	}

	/* Styling for Table of Contents */
	section.toc{
		justify-content: center;
		padding-bottom: 2rem;
	}

	/* Styling for normal text boxes */
	p{
		margin-left: 2.5rem;
		max-width: 90%;
		margin-right: 0;
	}
	
	/* Styling for Iblis and Retribution speech*/	
	span.iblis{
		text-shadow: 0px 0px 5px var(--Accents);
	}
	
	span.retribution::before,
	span.iblis::before{
		content: "|";
	}
	
	span.retribution::after,
	span.iblis::after{
		content: "¦";
	}
	
	span.retribution{
		text-shadow: 0px 2px 5px #000000;
	}
	
	/* Styling for links within text */
	a[type="textlink"]{
		color: var(--Accents);
	}
	
	/* Hover behavior for text links */
	a[type="textlink"]:hover, a[type="logue"]:hover{
		text-decoration: none;
	}
	
	/* Styling for Pro/Epi-logue Links*/
	a[type="logue"]{
		color: var(--Accents);
		font-size: 22px;
		text-transform: uppercase;
	}
	
	/* Styling for Chapter Titles */
	span.title{
		color: var(--Main-Font);
	}

	/* Styling for Bar Dividers */
	.bar {
		margin-inline: auto;
		border-top: 2px solid var(--Accents);
		width: 50%;
	}

	/* Styling for Centered Text */
	.center {
		text-align: center;
		text-indent: 0;
	}

}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
	:root,
	::backdrop{
	/* Fonts */
		--heading-font: "Bebas Neue", san-serif;
		--body-font: "Times New Roman", serif;
		--monospace-font: "Monaco", monospace;
		--standard-border-radius: 10px;
	
	/* Dark Mode Colors */
	color-scheme: dark;
		--Main-BG: #1A1A1A;
		--Header-BG: #333333;
		--Section-BG: #595959;
		--Header-Button: #357124;
		--Current-Button: #E6193F;
		--BookNav-Button: #1C7D58;
		--Hover-Button: #5AC23D;
		--Current-Hover: #8A0F26;
		--BookNav-Hover: #68C639;
		--Header1-Font: #FFFFFF;
		--Header2-Font: #F2F2F2;
		--Header3-Font: #E6E6E6;
		--Header4-Font: #FFFFFF;
		--Main-Font: #FFFFFF;
		--Accents: #D0922F;
		--CharacterA-Border: #FFD700;
		--CharacterB-Border: #C0C0C0;
		--CharacterC-Border: #CE8946;
		--CharacterD-Border: #90EE90;
	}
	
	/* List Prep for Navigation Menus */
	ul.navheader, ul.navfooter, ul.booknav{
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
	}

	/* Styling for Header Navigation Menu */
	ul.navheader {
		background-color: var(--Main-BG);
		border-top: 2px solid var(--CharacterA-Border);
		border-bottom: 2px solid var(--CharacterA-Border);
		box-shadow: 0 2px 2px #FFD70033, 0 -2px 2px #FFD70033;
		position: sticky;
		top: 1px;
		margin-bottom: 10px;
	}

	/* Sizing for Header Navigation Buttons */
	li.navheader, li.dropdown {
		margin: 10px 10px;
		width: 150px;
	}

	/* Styling for Header Navigation Buttons */
	li.navheader a, li.dropdown a, .dropbtn {
		display: block;
		border-left: 3px solid var(--CharacterA-Border);
		border-right: 3px solid var(--CharacterA-Border);		
		color: var(--CharacterA-Border);
		text-align: center;
		text-decoration: none;
		padding: 5px 5px;
		box-shadow: inset 2px 0 2px #FFD70080, inset -2px 0 2px #FFD70080;
	}

	/* Styling for the Dropdown Buttons */
	.dropbutton {
		text-decoration: none;
		background-color: var(--Header-BG);
		border-left: 2px solid var(--CharacterA-Border);
		border-right: 2px solid var(--CharacterA-Border);
		margin-top: 5px;
		box-shadow: inset 2px 1px 2px #FFD70080, inset -2px -1px 2px #FFD700;
		box-shadow: inset 2px 0 2px #FFD70080, inset -2px 0 2px #FFD70080;
		display: block;
	}

	/* Styling for Hover Behavior for Head Navigation Buttons */
	.navheader a:hover, .dropdown a:hover, .dropbutton:hover, .navfooter a:hover {
		background-color: var(--CharacterA-Border);
		box-shadow: inset 2px 0 2px var(--Header-BG), inset -2px 0 2px var(--Header-BG);
		color: #000;
	}

	/* Styling for Active Behavior for Head Navigation Buttons */
	.navheader a:active, .dropdown a:active, .dropbutton:active, .navfooter a:active {
		background-color: #FFD700CC;
		box-shadow: inset 1px 1px 3px #000A, inset -1px -1px 3px #000A;
	}

	/* Hiding Dropdown Buttons */
	.dropdown-content {
		display: none;
		position: absolute;
		margin-left: 10px;
		width: 130px;
	}

	/* Displaying Dropdown Buttons */
	.dropdown:hover .dropdown-content {
		display: block;
	}

	/* Styling for Current Page Buttons at Child Page */
	li.dropdown a[type="currentchild"]{
		background-color: var(--Current-Button);
		color: var(--Main-Font);
		box-shadow: inset 2px 0 2px var(--Header-BG), inset -2px 0 2px var(--Header-BG);
	}

	/* Styling for Hover Behavior for Current Page Buttons */
	li.dropdown a[type="currentchild"]:hover{
		background-color: var(--Current-Hover);
		color: var(--Main-Font);
	}
	
	/* Styling for Active Behavior for Current Page Buttons */
	li.dropdown a[type="currentchild"]:active {
		background-color: #8A0F2680;
		color: #FFFFFFCC;
	}

	/* Styling for Copyright Notice */
	.copynote {
		text-align: center;
		color: var(--Main-Font);		
		font-family: var(--body-font);
		font-size: 10px;
	}
	
	/* Styling for Footer Navigation Menu */
	ul.navfooter{
		list-style-type: none;
		width: 60%;
		margin: 0;
		margin-left: 20%;
		padding: 0;
		display: flex;
		justify-content: center;
		border-top: 1px solid var(--CharacterA-Border);
		border-bottom: 1px solid var(--CharacterA-Border);
		background-color: var(--Header-BG);
		box-shadow: 0 2px 2px #FFD70033, 0 -2px 2px #FFD70033;
	}
	
	/* Sizing for Footer Navigation Buttons */
	li.navfooter {
		margin: 5px 5px;
		width: 100px;
	}
	
	/* Styling for Footer Navigation Buttons */
	li.navfooter a {
		display: block;
		text-decoration: none;
		border-left: 1px solid var(--CharacterA-Border);
		border-right: 1px solid var(--CharacterA-Border);		
		font-size: .75rem;
		color: var(--CharacterA-Border);
		padding: 2px 2px;
		box-shadow: inset 2px 0 2px #FFD70080, inset -2px 0 2px #FFD70080;
		text-align: center;		
	}

	/* Styling for Book Navigation Menu */
	ul.booknav{
		width: 80%;
		margin-left: 10%;
		border-top: 2px solid var(--CharacterA-Border);
		border-bottom: 2px solid var(--CharacterA-Border);
		padding-top: 5px;
		padding-bottom: 5px;
		box-shadow: 0 2px 2px #FFD70033, 0 -2px 2px #FFD70033;
	}

	/* Sizing for Book Navigation Buttons */
	.navbutton{
		margin-right: 5px;
		width: 125px;
	}
	
	/* Styling for Book Navigation Buttons */
	li.navbutton a {
		display: block;
		padding: 10px 5px;
		font-family: var(--heading-font);
		font-size: .75rem;		
		text-decoration: none;
		color: #FFF;
		text-align: center;
		border-left: 2px solid var(--CharacterA-Border);
		border-right: 2px solid var(--CharacterA-Border);
		box-shadow: inset 2px 0 2px #FFD70080, inset -2px 0 2px #FFD70080;		
	}

	/* Styling for Hover Behavior for Book Navigation Buttons */
	li.navbutton a:hover{
		background-color: var(--BookNav-Hover);
		box-shadow: inset 2px 0 2px var(--Main-BG), inset -2px 0 2px var(--Main-BG);
	}
	
	/* Styling for Active Behavior for Book Navigation Buttons */
	li.navbutton a:active{
		background-color: #68C63980;
		color: #0000004D;
	}
	
	/* Styling for Light/Dark Toggle */
	.toggle-container{
		color: var(--Accents);
		position: absolute;
		top: 0;
		right: 25px;
		cursor: pointer;
		border: 1px solid var(--Accents);
	}
	
	/* Styling for Headers */
	header{
		margin-inline: auto;
		padding: 10px;
		width: 60%;
		background-color: var(--Header-BG);
		border-top: 5px solid var(--CharacterA-Border);
		border-bottom: 5px solid var(--CharacterA-Border);
		margin-bottom: 1rem;
		box-shadow: 0 2px 2px #FFD70033, 0 -2px 2px #FFD70033, inset 0 2px 2px #FFD70033, inset 0 -2px 2px #FFD70033;		
	}

	/* Styling for h1, h2, h3 Tier Headers */
	h1, h2, h3{
		font-family: var(--heading-font);
		color: var(--Header1-Font);
		justify-content: center;
		text-align: center;
		border-left: 3px solid var(--CharacterA-Border);
		border-right: 3px solid var(--CharacterA-Border);
		margin-left: 10%;
		margin-right: 10%;
	}
	
	h2{
		margin-left: 15%;
		margin-right: 15%;
	}
	
	h3{
		margin-left: 20%;
		margin-right: 20%;
	}

	/* Styling for Section Backgrounds */
	section{
		margin-inline: auto;
		margin-top: 1rem;
		margin-bottom: 1rem;
		padding: 0.5rem;
		background-color: var(--Section-BG);
		border-top: 5px solid var(--CharacterA-Border);
		box-shadow: 0 2px 2px #FFD70033, 0 -2px 2px #FFD70033, inset 0 2px 2px #FFD70033, inset 0 -2px 2px #FFD70033;
		border-bottom: 5px solid var(--CharacterA-Border);
	}

	/* Management for Objects in Main Body */
	main *{
		margin-inline: auto;
		max-width: 75%;
		font-family: var(--body-font);
		color: var(--Main-Font);
		text-align: justify;
		text-indent: 2rem;
		
	}

	/* Table Styling, not used but here if I need to add anything */
	table {
	}

	/* Table Cell Styling */
	th, td {
		text-align: center;
		text-indent: 0;
		padding: 10px 10px
	}

	/* Styling for h4 Tier Headers */
	h4{
		font-family: var(--heading-font);
		color: var(--Header4-Font);
		text-align: center;
		text-shadow: 3px 5px 10px #000000;
		text-indent: 0;
		font-size: 25px;
		margin-top: 0.5rem;
		margin-bottom: 10px;
	}

	/* Styling for Table of Contents */
	section.toc{
		justify-content: center;
		padding-bottom: 2rem;
	}

	/* Styling for normal text boxes */
	p{
		margin-left: 2.5rem;
		max-width: 90%;
		margin-right: 0;
	}
	
	/* Styling for Iblis and Retribution speech*/	
	span.iblis{
		text-shadow: 0px 0px 5px var(--CharacterA-Border);
	}
	
	span.retribution::before,
	span.iblis::before{
		content: "|";
	}
	
	span.retribution::after,
	span.iblis::after{
		content: "¦";
	}
	
	span.retribution{
		text-shadow: 0px 2px 5px #000000;
	}
	
	/* Styling for links within text */
	a[type="textlink"]{
		color: var(--CharacterA-Border);
	}
	
	/* Hover behavior for text links */
	a[type="textlink"]:hover, a[type="logue"]:hover{
		text-decoration: none;
	}
	
	/* Styling for Pro/Epi-logue Links*/
	a[type="logue"]{
		color: var(--CharacterA-Border);
		font-size: 22px;
		text-transform: uppercase;
	}
	
	/* Styling for Chapter Titles */
	span.title{
		color: var(--Main-Font);
	}
	
	/* Styling for Bar Dividers */
	.bar {
		margin-inline: auto;
		border-top: 2px solid var(--CharacterA-Border);
		width: 50%;
	}

	/* Styling for Centered Text */
	.center {
		text-align: center;
		text-indent: 0;
	}

	/* Styling for Images */
	img {
		max-width: 100%;
		opacity: 0.8;
	}

}

/* HTML and Fonts */
html {
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	line-height: 1.25;
	background-color: var(--Main-BG);
}

bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}