/* 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: #F2F2F2;
				--Header-BG: #CCCCCC;
				--Section-BG: #FFFFFF;
				--Header-Button: #FFFFFF;
				--Current-Button: #3CE236;
				--Hover-Button: #A6A6A6;
				--Current-Hover: #93EF8F;
				--Font: #000000;
				--Accents: #E18484;
				--CharacterA-Border: #FFD700;
				--CharacterB-Border: #C0C0C0;
				--CharacterC-Border: #CE8946;
				--CharacterD-Border: #90EE90;
	}
	
	/* List Prep for Navigation Menus */
	ul.navheader, ul.navfooter, ul.pages, ul.socials{
		list-style-type: none;
		margin: 0;
		padding: 0;
		justify-content: center;
	}
	
	/* Styling for Header Navigation Menu */
	ul.navheader {
		height: auto;
		width: 9%;
		margin-left: 1%;
		background-color: var(--Header-BG);
		border: 4px double var(--CharacterA-Border);
		border-radius: 10px;
		float: left;
		position: sticky;
		top: 1px;
		margin-bottom: 10px;
	}
	
	/* Sizing for Header Navigation Buttons */
	li.navheader, li.dropdown {
		margin: 10px 10px;
		max-width: 150px;
	}
	
	/* Styling for Header Navigation Buttons */
	li.navheader a, li.dropdown a, .dropbtn {
		display: block;
		background-color: var(--Header-Button);
		color: var(--Font);
		text-align: center;
		padding: 5px 5px;
		opacity: 0.8;
		transition: all 0.4s ease;
	}
	
	/* Styling for Dropdown Buttons */
	.dropbutton{
		margin-top: 5px;
		display: block;
	}
	
	/* Styling for Hover Behavior for Head Navigation Buttons */
	.navheader a:hover, .dropdown a:hover, .dropbutton:hover{
		transform: translateY(-3px);
		box-shadow: 0 5px 5px #000;
		background-color: var(--Hover-Button);
		text-decoration: none;
		opacity: 1;
	}
	
	/* Styling for Active Behavior for Head Navigation Buttons */
	.navheader a:active, .dropdown a:active, .dropbutton:active{
		background-color: var(--Header-Button);
		transform: translateY(0);
		box-shadow: none;
	}
	
	/* Hiding Dropdown Buttons */
	.dropdown-content {
		display: none;
		position: relative;
		margin-left: 10px;
		max-width: 130px;
		overflow: auto;
	}
	
	/* Displaying Dropdown Buttons */
	.dropdown:hover .dropdown-content{
		display: block;
	}
	
	/* Styling for Current Page Buttons at Child Page */
	li.dropdown a[type="currentchild"], div.dropdown-content a[type="curentchild"]{
		background-color: var(--Current-Button);
	}
	
	/* Styling for Hover Behavior for Current Page Buttons */
	li.dropdown a[type="currentchild"]:Hover, div.dropdown-content a[type="currentchild"]:Hover{
		background-color: var(--Current-Hover);
	}
	
	/* Styling for Active Behavior for Current Page Buttosn */
	li.dropdown a[type="currentchild"]:Active, div.dropdown-content a[type="currentchild"]:Active{
		background-color: var(--Current-Button);
	}
	
	/* Styling for Copyright Notice */
	.copynote{
		text-align: center;
		font-family: var(--body-font);
		font-size: 10px;
	}
	
	/* Styling for Footer Navigation Menu */
	ul.navfooter {
		display: flex;
		width: 80%;
		margin-top: 10px;
		margin-left: 10%;
		background-color: var(--Header-BG);
		border: 4px double var(--CharacterA-Border);
		border-radius: 10px;
	}
	
	/* Sizing for Footer Navigation Buttons */
	li.navfooter{
		margin: 5px 5px;
		width: 100px;
	}
	
	/* Styling for Footer Navigation Buttons */
	li.navfooter a{
		display: block;
		text-align: center;
		text-decoration: none;
		font-size: .75rem;
		color: var(--font);
		background-color: var(--Hover-Button);
		padding: 3px 3px;
		opacity: 0.8;
		transition: all 0.4s ease;
	}
	
	/* Styling for Hover Behavior for Footer Navigation Buttons */
	li.navfooter a:hover{
		background-color: var(--Header-Button);
		opacity: 1;
	}
	
	/* Styling for Pagination Menu */
	ul.pages{
		display: flex;
		width: 30%;
		margin-left: 10px;
		margin-bottom: 5px;
	}
	
	/* Sizing for Pagination Buttons */
	li.pages{
		margin: 5px 5px;
		text-align: center;
		font-size: 1rem;
	}
	
	/* Styling for Current Pagination "Button" */
	li.pages[type="current"]{
		background-color: var(--Current-Button);
		padding: 5px 5px;
	}
	
	/* Styling for Pagination Buttons */
	li.pages a{
		background-color: var(--Header-Button);
		display: block;
		color: var(--font);
		padding: 5px 5px;
		transition: all 0.4s ease;
	}
	
	/* Hover Behavior for Pagination Buttons */
	li.pages a:hover{
		transform: translateY(-5px);
		background-color: var(--Hover-Button);
		text-decoration: none;
	}
	
	/* Styling for Headers */
	header{
		margin-inline: auto;
		padding: 1px;
		width: 60%;
		background-color: var(--Header-BG);
		border: 10px double var(--CharacterA-Border);
		border-radius: 10px;
		margin-bottom: 1rem;
	}
	
	/* Styling for h1, h2, h3 Tier Headers */
	h1{
		font-family: var(--heading-font);
		text-align: center;
		background-color: var(--Header-Button);
		font-size: 3rem;
		margin-left: 10%;
		margin-right: 10%;
	}
	
	/* Styling for Section Background */
	section{
		margin-inline: auto;
		margin-top: 1rem;
		padding: 0.5rem;
		background-color: var(--Header-BG);
		border: 10px double var(--CharacterA-Border);
		max-width: 85%;
		margin-left: 11%;
		margin-right: 4%;
		justify-content: center;
		display: flex;
	}
	
	/* Styling for Art Piece */
	div.art{
		border: 20px ridge var(--CharacterA-Border);
		max-width: 60%;
		display: flex;
		margin-right: 5px;
		border-radius: 5px;
		padding: 5px;
	}
	
	/* Update Piece Border for Commissioned Pieces */
	div[type="comm"]{
		border-color: var(--CharacterD-Border);
	}
	
	/* Fitting the Art to the Container */
	div.art img{
		width: 100%;
		height: 100%;
		object-fit: scale-down;
	}
	
	/* Positioning the Info Div*/
	div.info{
		width: 35%;
		float: right;
		margin-left: 5px;
	}
	
	/* Styling for the Info Divs */
	div.date, div.media, div.blurb{
		margin: 5px;
		padding-left: 5px;
		font-size: 1.5rem;
		background-color: var(--Header-Button);
	}
	
	/* Max Width for the Date and Media divs */
	div.date, div.media{
		width: 65%;
	}
	
	span.px{
		font-size: 1rem;
	}
	
	
	/* Management for Blurb div */
	div.blurb{
		padding: 10px;
		text-align: justify;
	}
	
	/* Styling for Blurb Links */
	a.blurblink{
		color: var(--font);
	}
	
	/* Hover Behavior for Blurb Links */
	a.blurblink:hover{
		text-decoration: none;
		color: var(--Current-Hover);
	}
	
	/* Styling the Socials Menu */
	ul.socials{
		margin-left: 5px;
		display: flex;
		justify-content: left;
	}
	
	/* Sizing for Social Buttons */
	li.socials{
		margin: 5px 5px;
		width: 50px;
	}
	
	li.socials img{
		width: 16px;
		object-fit: scale-down;
	}
	
	li.gallery{
		margin: 5px 5px;
		width: 25%;
	}
	
	/* Styling for Social Buttons */
	li.socials a{
		display: block;
		text-align: center;
		color: var(--font);
		background-color: var(--Header-Button);
		padding: 5px;
		transition: all 0.4s ease;
	}
	
	/* Hover Behavior for Social Buttons */
	li.socials a:hover{
		text-decoration: none;
		background-color: var(--Hover-Button);		
	}
	
	/* Styling for Back to Gallery Button */
	li.gallery a{
		display: block;
		text-align: center;
		color: var(--font);
		background-color: var(--Current-Button);
		padding: 5px;
		transition: all 0.4s ease;
	}
	
	/* Hover Behavior for Gallery Button */
	.gallery a:hover{
		text-decoration: none;
		background-color: var(--Current-Hover);
	}
	
	/* Active Behavior for Gallery Button */
	.gallery a:active{
		background-color: var(--Current-Button);
	}
	
}
/* 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: #0D0D0D;
				--Header-BG: #333333;
				--Header-Button: #000000;
				--Current-Button: #137010;
				--Hover-Button: #4D4D4D;
				--Current-Hover: #22C91D;
				--Font: #FFFFFF;
				--Accents: #E18484;
				--CharacterA-Border: #FFD700;
				--CharacterB-Border: #C0C0C0;
				--CharacterC-Border: #CE8946;
				--CharacterD-Border: #90EE90;
	}
	
	/* List Prep for Navigation Menus */
	ul.navheader, ul.navfooter, ul.pages, ul.socials{
		list-style-type: none;
		margin: 0;
		padding: 0;
		justify-content: center;
	}
	
	/* Styling for Header Navigation Menu */
	ul.navheader {
		height: auto;
		width: 9%;
		margin-left: 1%;
		background-color: var(--Header-BG);
		border: 4px double var(--CharacterB-Border);
		border-radius: 10px;
		float: left;
		position: sticky;
		top: 1px;
		margin-bottom: 10px;
	}
	
	/* Sizing for Header Navigation Buttons */
	li.navheader, li.dropdown {
		margin: 10px 10px;
		max-width: 150px;
	}
	
	/* Styling for Header Navigation Buttons */
	li.navheader a, li.dropdown a, .dropbtn {
		display: block;
		background-color: var(--Header-Button);
		color: var(--Font);
		text-align: center;
		padding: 5px 5px;
		opacity: 0.8;
		transition: all 0.4s ease;
	}
	
	/* Styling for Dropdown Buttons */
	.dropbutton{
		margin-top: 5px;
		display: block;
	}
	
	/* Styling for Hover Behavior for Head Navigation Buttons */
	.navheader a:hover, .dropdown a:hover, .dropbutton:hover{
		transform: translateY(-3px);
		box-shadow: 0 5px 5px #000;
		background-color: var(--Hover-Button);
		text-decoration: none;
		opacity: 1;
	}
	
	/* Styling for Active Behavior for Head Navigation Buttons */
	.navheader a:active, .dropdown a:active, .dropbutton:active{
		background-color: var(--Header-Button);
		transform: translateY(0);
		box-shadow: none;
	}
	
	/* Hiding Dropdown Buttons */
	.dropdown-content {
		display: none;
		position: relative;
		margin-left: 10px;
		max-width: 130px;
		overflow: auto;
	}
	
	/* Displaying Dropdown Buttons */
	.dropdown:hover .dropdown-content{
		display: block;
	}
	
	/* Styling for Current Page Buttons at Child Page */
	li.dropdown a[type="currentchild"], div.dropdown-content a[type="curentchild"]{
		background-color: var(--Current-Button);
	}
	
	/* Styling for Hover Behavior for Current Page Buttons */
	li.dropdown a[type="currentchild"]:Hover, div.dropdown-content a[type="currentchild"]:Hover{
		background-color: var(--Current-Hover);
		text-shadow: 1px 1px 2px #000;
	}
	
	/* Styling for Active Behavior for Current Page Buttosn */
	li.dropdown a[type="currentchild"]:Active, div.dropdown-content a[type="currentchild"]:Active{
		background-color: var(--Current-Button);
	}
	
	/* Styling for Copyright Notice */
	.copynote{
		text-align: center;
		font-family: var(--body-font);
		font-size: 10px;
	}
	
	/* Styling for Footer Navigation Menu */
	ul.navfooter {
		display: flex;
		width: 80%;
		margin-top: 10px;
		margin-left: 10%;
		background-color: var(--Header-BG);
		border: 4px double var(--CharacterB-Border);
		border-radius: 10px;
	}
	
	/* Sizing for Footer Navigation Buttons */
	li.navfooter{
		margin: 5px 5px;
		width: 100px;
	}
	
	/* Styling for Footer Navigation Buttons */
	li.navfooter a{
		display: block;
		text-align: center;
		text-decoration: none;
		font-size: .75rem;
		color: var(--font);
		background-color: var(--Hover-Button);
		padding: 3px 3px;
		opacity: 0.8;
		transition: all 0.4s ease;
	}
	
	/* Styling for Hover Behavior for Footer Navigation Buttons */
	li.navfooter a:hover{
		background-color: var(--Header-Button);
		opacity: 1;
	}
	
	/* Styling for Pagination Menu */
	ul.pages{
		display: flex;
		width: 30%;
		margin-left: 10px;
		margin-bottom: 5px;
	}
	
	/* Sizing for Pagination Buttons */
	li.pages{
		margin: 5px 5px;
		text-align: center;
		font-size: 1rem;
	}
	
	/* Styling for Current Pagination "Button" */
	li.pages[type="current"]{
		background-color: var(--Current-Button);
		padding: 5px 5px;
	}
	
	/* Styling for Pagination Buttons */
	li.pages a{
		background-color: var(--Header-Button);
		display: block;
		color: var(--font);
		padding: 5px 5px;
		transition: all 0.4s ease;
	}
	
	/* Hover Behavior for Pagination Buttons */
	li.pages a:hover{
		transform: translateY(-5px);
		background-color: var(--Hover-Button);
		text-decoration: none;
	}
	
	/* Styling for Headers */
	header{
		margin-inline: auto;
		padding: 1px;
		width: 60%;
		background-color: var(--Header-BG);
		border: 10px double var(--CharacterB-Border);
		border-radius: 10px;
		margin-bottom: 1rem;
	}
	
	/* Styling for h1, h2, h3 Tier Headers */
	h1{
		font-family: var(--heading-font);
		text-align: center;
		background-color: var(--Header-Button);
		font-size: 3rem;
		margin-left: 10%;
		margin-right: 10%;
	}
	
	/* Styling for Section Background */
	section{
		margin-inline: auto;
		margin-top: 1rem;
		padding: 0.5rem;
		background-color: var(--Header-BG);
		border: 10px double var(--CharacterB-Border);
		max-width: 85%;
		margin-left: 11%;
		margin-right: 4%;
		justify-content: center;
		display: flex;
	}
	
	/* Styling for Art Piece */
	div.art{
		border: 20px ridge var(--CharacterB-Border);
		max-width: 60%;
		display: flex;
		margin-right: 5px;
		border-radius: 5px;
		padding: 5px;
	}
	
	/* Update Piece Border for Commissioned Pieces */
	div[type="comm"]{
		border-color: var(--CharacterD-Border);
	}
	
	/* Fitting the Art to the Container */
	div.art img{
		width: 100%;
		height: 100%;
		object-fit: scale-down;
	}
	
	/* Positioning the Info Div*/
	div.info{
		width: 35%;
		float: right;
		margin-left: 5px;
	}
	
	/* Styling for the Info Divs */
	div.date, div.media, div.blurb{
		margin: 5px;
		padding-left: 5px;
		font-size: 1.5rem;
		background-color: var(--Header-Button);
	}
	
	/* Max Width for the Date and Media divs */
	div.date, div.media{
		width: 65%;
	}
	
	span.px{
		font-size: 1rem;
	}
	
	
	/* Management for Blurb div */
	div.blurb{
		padding: 10px;
		text-align: justify;
	}
	
	/* Styling for Blurb Links */
	a.blurblink{
		color: var(--font);
	}
	
	/* Hover Behavior for Blurb Links */
	a.blurblink:hover{
		text-decoration: none;
		color: var(--Current-Hover);
	}
	
	/* Styling the Socials Menu */
	ul.socials{
		margin-left: 5px;
		display: flex;
		justify-content: left;
	}
	
	/* Sizing for Social Buttons */
	li.socials{
		margin: 5px 5px;
		width: 50px;
	}
	
	li.gallery{
		margin: 5px 5px;
		width: 25%;
	}
	
	li.socials img{
		max-width: 16px;
		object-fit: scale-down;
	}
	
	/* Styling for Social Buttons */
	li.socials a{
		display: block;
		text-align: center;
		color: var(--font);
		background-color: var(--Header-Button);
		padding: 5px;
		transition: all 0.4s ease;
	}
	
	/* Hover Behavior for Social Buttons */
	li.socials a:hover{
		text-decoration: none;
		background-color: var(--Hover-Button);		
	}
	
	/* Styling for Back to Gallery Button */
	li.gallery a{
		display: block;
		text-align: center;
		color: var(--font);
		background-color: var(--Current-Button);
		padding: 5px;
		transition: all 0.4s ease;
	}
	
	/* Hover Behavior for Gallery Button */
	.gallery a:hover{
		text-decoration: none;
		background-color: var(--Current-Hover);
	}
	
	/* Active Behavior for Gallery Button */
	.gallery a:active{
		background-color: var(--Current-Button);
	}
}

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