/* Global Variables Light Mode */
@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: #CFE2CF;
				--Header-BG: #CCCCCC;
				--Section-BG: #EAFAEA;
				--Current-Button: #98E798;
				--Hover-Button: #B3B3B3;
				--Current-Hover: #45D345;
				--Header-Font: #000000;
				--Main-Font: #000000;
				--Accents: #4CE6E6;
				--CharacterA-Border: #FFD700;
				--CharacterB-Border: #C0C0C0;
				--CharacterC-Border: #CE8946;
				--CharacterD-Border: #90EE90;
	}

	/* List Prep for Navigation Menus */
	ul.navheader, ul.navfooter{
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
	}

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

	/* 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: 1px solid #000;
		color: var(--Header-Font);
		text-align: center;
		text-decoration: none;
	}

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

	/* Styling for Hover Behavior for Header Navigation Buttons */
	.navheader a:hover, .dropdown a:hover, .dropbutton:hover, .navfooter a:hover {
		background-color: var(--Hover-Button);
	}

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

	/* Hiding Dropdown Buttons */
	.dropdown-content {
		display: none;
		position: absolute;
		width: 150px;
	}

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

	/* Styling for Current Page Buttons at Child Page */
	a[type="currentchild"]{
		background-color: var(--Current-Button);
	}

	/* Styling for Hover Behavior for Current Page Buttons */
	a[type="currentchild"]:hover{
		background-color: var(--Current-Hover)
	}

	/* Setting Main Background Color */
	main {
		background-color: var(--Section-BG);
	}

	/* Styling for h1 Headers */
	h1 {
		text-align: center;
		border-bottom: 5px solid var(--Accents);
		padding-top: 2rem;
		color: var(--Header-Font);
	}
	
	/* Styling for Intra-Page Navigation Menu*/
	.subnav {
		border-right: 1px solid var(--Accents);
		width: 10%;
		float: left;
		margin-left: 8px;
		background-color: var(--Section-BG);
		position: sticky;
		top: 55px;
	}
	
	/* Styling for Intra-Page Navigation Links */
	.gabenav {
		list-style-type: none;
		margin: 5px;
		padding: 0;
	}
	
	/* Styling for Biography Sub-Links */
	.bionav {
		list-style-type: none;
		margin: 0;
	}
	
	/* Color for Intra-Page Navigation Links */
	.gabenav a, .bionav a{
		color: var(--Main-Font);
	}
	
	/* Hover Behavior for Intra-Page Navigation Links */
	.gabenav a:hover, .bionav a:hover{
		text-decoration: none;
	}
	
	/* Table Styling */
	table {
		margin-top: .5rem;
		margin-left: 1rem;
		margin-right: 4%;
		border: 1px solid var(--Accents);
		border-collapse: collapse;
		background-color: var(--Header-BG);
	}
	
	/* Table Cell Styling */
	th, td {
		border-top: 1px solid #000;
		color: var(--Main-Font);
		font-size: .9rem;
	}
	
	/* Sizing and Alignment for Profile Image */
	.profileimage {
		padding-top: .5rem;
		padding-bottom: .5rem;
		text-align: center;
		border: none;		
	}
	
	/* Font for Table Headers */
	th {
		font-family: var(--heading-font);
	}
	
	/* Styling for Information Sections */
	.info {
		width: 85%;
		margin-left: 11%;
		margin-right: 4%;
		padding: 10px;
		padding-top: 3px;
		color: var(--Main-Font);
		text-align: justify;
		font-family: var(--body-font);
	}
	
	/* Font for h3 and h4 headers */
	h3, h4 {
		font-family: var(--heading-font);
		width: 50%;
		border-bottom: 1px solid var(--Accents);
	}
	
	/* h4 header indent */
	h4{
		text-indent: 1rem;
	}
	
	/* Styling for the Profile Image */
	img {
		max-width: 300px;
		border-radius: 10px;
		background-color: #FFF;
	}
	
	/* 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{
		border-top: 1px solid var(--Accents);
	}
	
	/* Sizing for Footer Navigation Buttons */
	li.navfooter {
		margin: 5px 5px;
		width: 75px;
	}
	
	/* Styling for Footer Navigation Buttons */
	li.navfooter a {
		display: block;
		text-align: center;
		border: 1px solid #000;
		background-color: var(--Header-BG);
		text-decoration: none;
		font-size: .75rem;
		color: var(--Main-Font);
	}
}

/* Global Variables 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: #1F2E1F;
				--Header-BG: #404040;
				--Section-BG: #051505;
				--Current-Button: #30CF30;
				--Hover-Button: #808080;
				--Current-Hover: #1D7C1D;
				--Header-Font: #FFFFFF;
				--Main-Font: #FFFFFF;
				--Accents: #BF4CE6;
				--CharacterA-Border: #FFD700;
				--CharacterB-Border: #C0C0C0;
				--CharacterC-Border: #CE8946;
				--CharacterD-Border: #90EE90;
	}

	/* List Prep for Navigation Menus */
	ul.navheader, ul.navfooter{
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
	}

	/* Styling for Header Navigation Menu */
	ul.navheader {
		border-bottom: 1px solid #000;
		background-color: var(--Header-BG);
		display: flex;
		position: sticky;
		top: 1px;
	}

	/* 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: 1px solid #000;
		color: var(--Header-Font);
		text-align: center;
		text-decoration: none;
	}

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

	/* Styling for Hover Behavior for Head Navigation Buttons */
	.navheader a:hover, .dropdown a:hover, .dropbutton:hover, .navfooter a:hover {
		background-color: var(--Hover-Button);
	}

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

	/* Hiding Dropdown Buttons */
	.dropdown-content {
		display: none;
		position: absolute;
		width: 150px;
	}

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

	/* Styling for Current Page Buttons at Child Page */
	a[type="currentchild"]{
		background-color: var(--Current-Button);
	}

	/* Styling for Hover Behavior for Current Page Buttons */
	a[type="currentchild"]:hover{
		background-color: var(--Current-Hover)
	}

	/* Setting Main Background Color */
	main {
		background-color: var(--Section-BG);
	}

	/* Styling for h1 Headers */
	h1 {
		text-align: center;
		border-bottom: 5px solid var(--Accents);
		padding-top: 2rem;
		color: var(--Header-Font);
	}
	
	/* Styling for Intra-Page Navigation Menu*/
	.subnav {
		border-right: 1px solid var(--Accents);
		width: 10%;
		float: left;
		margin-left: 8px;
		position: sticky;
		top: 55px;
	}
	
	/* Styling for Intra-Page Navigation Links */
	.gabenav {
		list-style-type: none;
		margin: 5px;
		padding: 0;
	}
	
	/* Styling for Biography Sub-Links */
	.bionav {
		list-style-type: none;
		margin: 0;
	}
	
	/* Styling for Intra-Page Navigation Links */
	.gabenav a, .bionav a{
		color: var(--Main-Font);
	}
	
	/* Hover Behavior for Intra-Page Navigation Links */
	.gabenav a:hover, .bionav a:hover{
		text-decoration: none;
	}
	
	/* Table Styling */
	table {
		margin-top: .5rem;
		margin-left: 1rem;
		margin-right: 4%;
		border: 1px solid var(--Accents);
		border-collapse: collapse;
		float: right;
		background-color: var(--Header-BG);
	}
	
	/* Table Cell Styling */
	th, td {
		border-top: 1px solid #000;
		color: var(--Main-Font);
		font-size: .9rem;
	}
	
	/* Sizing and Alignment for Profile Image */
	.profileimage {
		padding-top: .5rem;
		padding-bottom: .5rem;
		text-align: center;
		border: none;		
	}
	
	/* Font for Table Data */
	th {
		font-family: var(--heading-font);
	}
	
	/* Styling for Information Sections */
	.info {
		width: 85%;
		margin-left: 11%;
		margin-right: 4%;
		padding: 10px;
		padding-top: 3px;
		color: var(--Main-Font);
		text-align: justify;
		font-family: var(--body-font);
	}
	
	/* Styling for h3 and h4 headers */
	h3, h4 {
		font-family: var(--heading-font);
		width: 50%;
		border-bottom: 1px solid var(--Accents);
	}
	
	/* h4 header indent */
	h4{
		text-indent: 1rem;
	}
	
	/* Styling for the Profile Image */
	img {
		max-width: 300px;
		border-radius: 10px;
		background-color: #FFF;
	}
	
	/* 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{
		border-top: 1px solid var(--Accents);
	}
	
	/* Sizing for Footer Navigation Buttons */
	li.navfooter {
		margin: 5px 5px;
		width: 75px;
	}
	
	/* Styling for Footer Navigation Buttons */
	li.navfooter a {
		display: block;
		border: 1px solid #000;
		background-color: var(--Header-BG);
		text-align: center;
		text-decoration: none;
		font-size: .75rem;
		color: var(--Header-Font);
	}
}

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