/* 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: #C1F0C1;
				--Header-BG: #F2F2F2;
				--Section-BG: #FFFFFF;
				--Header-Button: #C1C1F0;
				--Current-Button: #F0C1C1;
				--Hover-Button: #1E1E7B;
				--Current-Hover: #7B1E1E;
				--Header1-Font: #0A290A;
				--Header2-Font: #0F3E0F;
				--Header3-Font: #145214;
				--Header4-Font: #000000;
				--Main-Font: #000000;
				--Accents: #E18484;
				--CharacterA-Border: #FFD700;
				--CharacterB-Border: #C0C0C0;
				--CharacterC-Border: #CE8946;
				--CharacterD-Border: #90EE90;
	}

	/* Styling for Nav Section */
	nav{
		text-align: center;
		background-color: var(--Header-BG);
	}

	/* Styling for Header Navigation Menu */
	.navheader{
		margin-inline: auto;
		width: auto;
		padding-top: 1rem;
		padding-bottom: 1rem;
		position: sticky;
		top: 0;
		box-shadow: 0px 1px 3px #000A;
	}

	/* Styling for Header Navigation Buttons */
	.headerbutton{
		font-family: var(--heading-font);
		font-size: 1rem;
		color: #fff;
		border: 3px outset var(--CharacterA-Border);
		text-shadow: 1px 1px 3px #000;
		padding: 0.5rem 0.5rem;
		background-color: var(--Header-Button);
		border-radius: 10px;
		margin-right: 5px;
		box-shadow: inset -1px -1px 2px #000000AA, inset 2px 2px 1px #FFFFFFAA;
		position: sticky 10px;
	}

	/* Positioning for Dropdown Container */
	.dropdown {
		position: relative;
		display: inline-block;
	}

	/* Hiding Dropdown Content */
	.dropdown-content {
		display: none;
		position: absolute;
		width: 100%;
		overflow: auto;
	}
	
	/* Links inside the dropdown */
	.dropdown-content a {
		margin-top: 2px;
		font-size: 15px;
		text-decoration: none;
		display: block;
	}
	
	/* Show Dropdown Content */
	.dropdown:hover .dropdown-content {display:block;}
	
	/* Styling for Hover Behavior for Links */
	a:hover {
		background-color: var(--Hover-Button);
		text-decoration: none;
	}

	/* Styling for Footer Navigation Menu */
	.navfooter{
		margin-inline: auto;
		width: 50%;
		margin-top: 2rem;
	}

	/* Styling for Footer Navigation Buttons */
	.footerbutton{
		font-family: var(--heading-font);
		font-size: 0.7rem;
		color: #fff;
		border: 2px outset var(--CharacterB-Border);
		padding: 0.5rem 0.5rem;
		background-color: var(--Hover-Button);
		border-radius: 10px;
		margin-right: 3px;
		box-shadow: inset -1px -1px 2px #000000AA, inset 2px 2px 1px #FFFFFFAA;
	}

	/* Styling for Hover Behavior for Footer Buttons */
	.footerbutton:Hover {
		background-color: var(--Header-Button);
	}

	/* Styling for Active Behavior for Links */
	a:active {
		box-shadow: inset -1px -1px 1px #FFFFFFAA, inset 2px 2px 1px #000;
		color: #FFFFFFAA;
		text-shadow: none;
	}

	/* Styling for Active Behavior for Footer Buttons */
	.footerbutton:active {
		box-shadow: inset -1px -1px 1px #FFFA, inset 2px 2px 1px #000A;
		color: #FFFFFF55
	}

	/* Styling for Current Page Buttons at Parent Page */
	a[type="currentparent"]{
		background-color: var(--Main-BG);
		border-style: solid;
		border-color: var(--Current-Button);
		box-shadow: none;
		text-shadow: none;
		text-decoration: none;
		color: #000000AA;
		box-shadow: inset 2px 2px 3px #00000066, inset -2px -2px 3px #00000066;
	}

	/* Styling for Current Page Buttons at Child Pages	*/
	a[type="currentchild"]{
		background-color: var(--Current-Button);
		text-shadow: 1px 1px 3px #000000;
		color: #FFFFFF;
	}

	/* Styling for Hover Behavior for Child Header Buttons */
	a[type="currentchild"]:Hover {
		background-color: var(--Current-Hover);
		text-decoration: none;
		text-shadow: 1px 1px 3px #000000;
		color: #FFFFFF;
	}
	
	/* Styling for Active Behavior for Child Header Buttons */
	a[type="currentchild"]:Active {
		color: #FFFFFFAA;
		text-shadow: none;
	}
	
	/* Styling for Book Navigation Menu */
	.booknav{
		margin-inline: auto;
		background-color: #00000000;
		width: 50%;
		margin-top: 10px;
		margin-bottom: 15px;
		padding: .75rem;
	}

	/* Styling for Book Navigation Buttons */
	.navbutton{
		font-family: var(--heading-font);
		font-size: .75rem;
		color: #FFF;
		padding: 5px 5px;
		margin-right: 5px;
		border: 3px outset var(--Current-Hover);
		background-color: var(--BookNav-Button);
		border-radius: 5px;
	}

	/* Styling for Hover Behavior for Book Navigation Buttons */
	.navbutton:hover{
		background-color: var(--BookNav-Hover);
	}
	
	/* 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: 10px double var(--Accents);		
		border-left: 10px ridge var(--Accents);
		border-right: 10px groove var(--Accents);
		border-bottom: none;
		border-radius: 10px 10px 0px 0px;
		box-shadow: 0 5px 5px #00000055, inset 3px 0px 3px #000000AA, inset -3px 0px 3px #000000AA;
		margin-bottom: 1rem;
	}

	/* Styling for h1 Tier Headers */
	h1{
		border-block-end: 10px solid var(--Accents);
		margin-block: 1 2rem;
		font-family: var(--heading-font);
		color: var(--Header1-Font);
		margin-inline: auto;
		max-width: 25ch;
		text-align: center;
	}

	/* Styling for h2 Tier Headers */
	h2{
		border-block-end: 5px solid var(--Accents);
		margin-block: 1.5 0.5rem;
		font-family: var(--heading-font);
		color: var(--Header2-Font);
		margin-inline: auto;
		max-width: 20ch;
		text-align: center;
	}

	/* Styling for h3 Tier Headers */
	h3{
		border-block-end: 1px solid var(--Accents);
		margin-block: 1.5 0.5rem;
		font-family: var(--heading-font);
		color: var(--Header3-Font);
		margin-inline: auto;
		max-width: 30ch;
		text-align: center;
	}

	/* Styling for Section Backgrounds */
	section{
		margin-inline: auto;
		margin-top: 1rem;
		padding: 0.5rem;
		background-color: var(--Section-BG);
		border-left: 10px ridge var(--Accents);
		border-radius: 10px 0px 0px 10px;
		box-shadow: 0 5px 5px #0005;
	}

	/* 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;
		
	}

	/* Styling for Main Body */
	main {
		margin-inline: auto;
		background-color: #00000033;
		border-left: 5px double var(--Accents);
		border-right: 5px double var(--Accents);
		width: 80%;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	/* Styling for h4 Tier Headers */
	h4{
		font-family: var(--heading-font);
		color: var(--Header4-Font);
		margin-left: 2rem;
		text-indent: 0;
		font-size: 25px;
		margin-top: 0.5rem;
	}

	/* Styling for normal text boxes */
	p{
		margin-left: 2.5rem;
		max-width: 90%;
		margin-right: 0;
	}
	
	/* Styling for links within text */
	a[type="textlink"]{
		color: var(--Current-Hover);
	}
	
	/* Hover behavior for text links */
	a[type="textlink"]:hover{
		background-color: #00000000;
	}
	
	/* Active behavior for text links */
	a[type="textlink"]:active{
		box-shadow: none;
	}
	
	/* Styling for h4 Links */
	a[type="updatelink"]{
		font-family: var(--heading-font);
		text-indent: 1rem;
	}
	
	/* Hover behavior for h4 Links */
	a[type="updatelink"]:hover{
		background-color: #00000000;
		color: var(--Current-Hover);
		font-size: 27px;
	}

	/* Active behavior for h4 Links */
	a[type="updatelink"]:active{
		box-shadow: none;
		font-size: 25px;
	}

	/* Styling for Blockquotes */
	blockquote *{
		border-inline: 2px solid var(--Accents);
		border-inline-end: 2px solid var(--Accents);
		margin-bottom: 2rem;
		padding-inline: 10px;
		font-style: italic;
		text-indent: 0;
		text-align: center;
		text-transform: uppercase;
		text-shadow: 0px 10px 10px #000;
	}

	/* 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: 0rem;
	}

	/* Styling for Footers */
	footer {
		padding-top: 10px;
		border-block-start: 3px solid var(--Accents);
		margin-inline: auto;
		width: 45%;
		font-family: var(--body-font);
		font-size: 10px;
		color: var(--Header4-Font);
		text-align: center;
	}

	/* Styling for Copyright Notice */
	.copynote{
		padding-top: 10px;
		color: #000000;
	}

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

}

/* 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: #0f3e0f;
		--Header-BG: #BFBFBF;
		--Section-BG: #CCCCCC;
		--Header-Button: #191967;
		--Current-Button: #671919;
		--Hover-Button: #4646d2;
		--Current-Hover: #D24646;
		--Header1-Font: #000000;
		--Header2-Font: #051505;
		--Header3-Font: #0A290A;
		--Header4-Font: #000000;
		--Main-Font: #000000;
		--Accents: #671919;
		--CharacterA-Border: #FFD700;
		--CharacterB-Border: #C0C0C0;
		--CharacterC-Border: #CE8946;
		--CharacterD-Border: #90EE90;
	}
	
	/* Styling for Nav Section */
	nav{
		text-align: center;
		background-color: var(--Header-BG);
	}

	/* Styling for Header Navigation Menu */
	.navheader{
		margin-inline: auto;
		width: auto;
		padding-top: 1rem;
		padding-bottom: 1rem;
		position: sticky;
		top: 0;
		box-shadow: 0px 1px 3px #000A;
	}

	/* Styling for Header Navigation Buttons */
	.headerbutton{
		font-family: var(--heading-font);
		font-size: 1rem;
		color: #fff;
		border: 3px outset var(--CharacterA-Border);
		text-shadow: 1px 1px 3px #000;
		padding: 0.5rem 0.5rem;
		background-color: var(--Header-Button);
		border-radius: 10px;
		margin-right: 5px;
		box-shadow: inset -1px -1px 2px #000000AA, inset 2px 2px 1px #FFFFFFAA;
		position: sticky 10px;
	}

	/* Positioning for Dropdown Container */
	.dropdown {
		position: relative;
		display: inline-block;
	}

	/* Hiding Dropdown Content */
	.dropdown-content {
		display: none;
		position: absolute;
		width: 100%;
		overflow: auto;
	}
	
	/* Links inside the dropdown */
	.dropdown-content a {
		margin-top: 2px;
		font-size: 15px;
		text-decoration: none;
		display: block;
	}
	
	/* Show Dropdown Content */
	.dropdown:hover .dropdown-content {display:block;}
	
	/* Styling for Hover Behavior for Links */
	a:hover {
		background-color: var(--Hover-Button);
		text-decoration: none;
	}

	/* Styling for Footer Navigation Menu */
	.navfooter{
		margin-inline: auto;
		width: 50%;
		margin-top: 2rem;
	}

	/* Styling for Footer Navigation Buttons */
	.footerbutton{
		font-family: var(--heading-font);
		font-size: 0.7rem;
		color: #fff;
		border: 2px outset var(--CharacterB-Border);
		padding: 0.5rem 0.5rem;
		background-color: var(--Hover-Button);
		border-radius: 10px;
		margin-right: 3px;
		box-shadow: inset -1px -1px 2px #000000AA, inset 2px 2px 1px #FFFFFFAA;
	}

	/* Styling for Hover Behavior for Footer Buttons */
	.footerbutton:Hover {
		background-color: var(--Header-Button);
	}

	/* Styling for Active Behavior for Links */
	a:active {
		box-shadow: inset -1px -1px 1px #FFFFFFAA, inset 2px 2px 1px #000;
		color: #FFFFFFAA;
		text-shadow: none;
	}

	/* Styling for Active Behavior for Footer Buttons */
	.footerbutton:active {
		box-shadow: inset -1px -1px 1px #FFFA, inset 2px 2px 1px #000A;
		color: #FFFFFF55
	}

	/* Styling for Current Page Buttons at Parent Page */
	a[type="currentparent"]{
		background-color: var(--Main-BG);
		border-style: solid;
		border-color: var(--Current-Button);
		box-shadow: none;
		text-shadow: none;
		text-decoration: none;
		color: #FFFFFFAA;
		box-shadow: inset 2px 2px 3px #00000066, inset -2px -2px 3px #00000066;
	}

	/* Styling for Current Page Buttons at Child Pages	*/
	a[type="currentchild"]{
		background-color: var(--Current-Button);
		text-shadow: 1px 1px 3px #000000;
		color: #FFFFFF;
	}

	/* Styling for Hover Behavior for Child Header Buttons */
	a[type="currentchild"]:Hover {
		background-color: var(--Current-Hover);
		text-decoration: none;
		text-shadow: 1px 1px 3px #000000;
		color: #FFFFFF;
	}
	
	/* Styling for Active Behavior for Child Header Buttons */
	a[type="currentchild"]:Active {
		color: #FFFFFFAA;
		text-shadow: none;
	}
	
	/* Styling for Book Navigation Menu */
	.booknav{
		margin-inline: auto;
		background-color: #00000000;
		width: 50%;
		margin-top: 10px;
		margin-bottom: 15px;
		padding: .75rem;
	}

	/* Styling for Book Navigation Buttons */
	.navbutton{
		font-family: var(--heading-font);
		font-size: .75rem;
		color: #FFF;
		padding: 5px 5px;
		margin-right: 5px;
		border: 3px outset var(--Current-Hover);
		background-color: var(--BookNav-Button);
		border-radius: 5px;
	}

	/* Styling for Hover Behavior for Book Navigation Buttons */
	.navbutton:hover{
		background-color: var(--BookNav-Hover);
	}
	
	/* 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: 10px double var(--Current-Hover);
		border-left: 10px ridge var(--Current-Hover);
		border-right: 10px groove var(--Current-Hover);
		border-bottom: none;
		border-radius: 10px 10px 0px 0px;
		box-shadow: 0 5px 5px #00000055, inset 3px 0px 3px #000000AA, inset -3px 0px 3px #000000AA;
		margin-bottom: 1rem;
	}

	/* Styling for h1 Tier Headers */
	h1{
		border-block-end: 10px solid var(--Accents);
		margin-block: 1 2rem;
		font-family: var(--heading-font);
		color: var(--Header1-Font);
		margin-inline: auto;
		max-width: 25ch;
		text-align: center;
	}

	/* Styling for h2 Tier Headers */
	h2{
		border-block-end: 5px solid var(--Accents);
		margin-block: 1.5 0.5rem;
		font-family: var(--heading-font);
		color: var(--Header2-Font);
		margin-inline: auto;
		max-width: 20ch;
		text-align: center;
	}

	/* Styling for h3 Tier Headers */
	h3{
		border-block-end: 1px solid var(--Accents);
		margin-block: 1.5 0.5rem;
		font-family: var(--heading-font);
		color: var(--Header3-Font);
		margin-inline: auto;
		max-width: 30ch;
		text-align: center;
	}

	/* Styling for Section Backgrounds */
	section{
		margin-inline: auto;
		margin-top: 1rem;
		padding: 0.5rem;
		background-color: var(--Section-BG);
		border-left: 10px ridge var(--Current-Hover);
		border-radius: 10px 0px 0px 10px;
		box-shadow: 0 5px 5px #0005;
	}

	/* 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;
		
	}

	/* Styling for Main Body */
	main {
		margin-inline: auto;
		background-color: #FFFFFF33;
		border-left: 5px double var(--Accents);
		border-right: 5px double var(--Accents);
		width: 80%;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	/* Styling for h4 Tier Headers */
	h4{
		font-family: var(--heading-font);
		color: var(--Header4-Font);
		margin-left: 2rem;
		text-indent: 0;
		font-size: 25px;
		margin-top: 0.5rem;
	}

	/* Styling for normal text boxes */
	p{
		margin-left: 2.5rem;
		max-width: 90%;
		margin-right: 0;
	}
	
	/* Styling for links within text */
	a[type="textlink"]{
		color: var(--Accents);
	}
	
	/* Hover behavior for text links */
	a[type="textlink"]:hover{
		background-color: #00000000;
	}
	
	/* Active behavior for text links */
	a[type="textlink"]:active{
		box-shadow: none;
	}
	
	/* Styling for h4 Links */
	a[type="updatelink"]{
		font-family: var(--heading-font);
		text-indent: 1rem;
	}
	
	/* Hover behavior for h4 Links */
	a[type="updatelink"]:hover{
		background-color: #00000000;
		color: var(--Accents);
		font-size: 27px;
	}

	/* Active behavior for h4 Links */
	a[type="updatelink"]:active{
		box-shadow: none;
		font-size: 25px;
	}

	/* Styling for Blockquotes */
	blockquote *{
		border-inline: 2px solid var(--Accents);
		border-inline-end: 2px solid var(--Accents);
		margin-bottom: 2rem;
		padding-inline: 10px;
		font-style: italic;
		text-indent: 0;
		text-align: center;
		text-transform: uppercase;
		text-shadow: 0px 10px 10px #000;
	}

	/* 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: 0rem;
	}

	/* Styling for Footers */
	footer {
		padding-top: 10px;
		border-block-start: 3px solid var(--Accents);
		margin-inline: auto;
		width: 45%;
		font-family: var(--body-font);
		font-size: 10px;
		color: var(--Header4-Font);
		text-align: center;
	}

	/* Styling for Copyright Notice */
	.copynote{
		padding-top: 10px;
		color: #FFFFFF;
	}

	/* 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;
}