/* 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{
		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: 4px double var(--CharacterA-Border);
		border-radius: 10px;
		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;
		background-color: var(--Hover-Button);
		color: var(--Font);
		text-align: center;
		padding: 5px 5px;
		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(--Header-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: 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"], 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 {
		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{
		width: 20%;
		margin-top: 10px;
		margin-left: 40%;
	}
	
	/* Sizing for Pagination Buttons */
	li.pages{
		margin: 5px 5px;
		width: 25px;
		text-align: center;
		font-size: 1.5rem;
	}
	
	li.pages[type="current"]{
		background-color: var(--Current-Button)
	}
	
	/* Styling for Pagination Links */
	li.pages a{
		display: block;
		background-color: var(--Hover-Button);
		color: var(--font);
		transition: all 0.4s ease;
	}
	
	/* Hover Behavior for Pagination Links */
	li.pages a:hover{
		transform: translateY(-5px);
		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, h2, h3{
		font-family: var(--heading-font);
		text-align: center;
		background-color: var(--Header-Button);
		margin-left: 10%;
		margin-right: 10%;
	}
	
	h2{
		margin-left: 20%;
		margin-right: 20%;
	}
	
	h3{
		margin-left: 30%;
		margin-right: 30%;
	}
	
	/* 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);
	}
	
	/* Styling for the Gallery */
	div.gallery{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	/* Positioning for Pieces */
	div.piece{
		margin: 5px;
	}
	
	/* Styling for Links within Pieces */
	div.piece a{
		text-decoration: none;
		color: var(--font);
	}
	
	/* Styling for Art */
	div.art-portrait, div.art-landscape, div.art-square{
		border: 5px ridge var(--CharacterA-Border);
		padding: 5px;
		border-radius: 5px;
		overflow: clip;
		background-color: #000;
	}
	
	/* Fitting the Art to the Containter */
	div.art-portrait img, div.art-landscape img, div.art-square img{
		width: 100%;
		height: 100%;
		object-fit: contain;
		background-color: #FFF;
		transition: all 0.5s ease;
	}
	
	/* Sizing for Portrait-oriented Art */
	div.art-portrait{
		max-width: 200px;
		height: 300px;
	}
	
	/* Sizing for Landscape-oriented Art */
	div.art-landscape{
		width: 300px;
		height: 200px;
	}
	
	/* Sizing for Square-shaped art */
	div.art-square{
		width: 200px;
		height: 200px;
	}
	
	/* Art Filter, Unfocused */
	img{
		filter: blur(1px) brightness(80%) grayscale(50%);
	}
	
	/* Update Piece Border for Commissioned Pieces */
	div[type="comm"]{
		border-color: var(--CharacterD-Border);
	}
	
	/* Styling and Positioning for Title Placard */
	div.title{
		margin-top: 5px;
		text-align: center;
		margin-inline: auto;
		width: 140px;
		padding: 3px 3px;
		background-color: var(--Header-Button);
	}
	
	/* Hover Behavior for Art */
	div.art-portrait:hover, div.art-landscape:hover{
		transform: translateY(-5px);
		box-shadow: 0 3px 2px #00000080;
	}
	
	/* Removing Filters for Art */
	img:hover, img:focus{
		filter: none;
	}
	
}
/* 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{
		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: 4px double var(--CharacterB-Border);
		border-radius: 10px;
		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;
		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: 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"], 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 {
		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{
		width: 20%;
		margin-top: 10px;
		margin-left: 40%;
	}
	
	/* Sizing for Pagination Buttons */
	li.pages{
		margin: 5px 5px;
		width: 25px;
		text-align: center;
		font-size: 1.5rem;
	}
	
	/* Styling for Current Pagination "Button" */
	li.pages[type="current"]{
		background-color: var(--Current-Button)
	}
	
	/* Styling for Pagination Links */
	li.pages a{
		display: block;
		background-color: var(--Hover-Button);
		color: var(--font);
		transition: all 0.4s ease;
	}
	
	/* Hover Behavior for Pagination Links */
	li.pages a:hover{
		transform: translateY(-5px);
		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, h2, h3{
		font-family: var(--heading-font);
		text-align: center;
		background-color: var(--Header-Button);
		margin-left: 10%;
		margin-right: 10%;
	}
	
	h2{
		margin-left: 20%;
		margin-right: 20%;
	}
	
	h3{
		margin-left: 30%;
		margin-right: 30%;
	}
	
	/* 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);
	}
	
	/* Styling for the Gallery */
	div.gallery{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	/* Positioning for Pieces */
	div.piece{
		margin: 5px;
	}
	
	/* Styling for Links within Pieces */
	div.piece a{
		text-decoration: none;
		color: var(--font);
	}
	
	/* Styling for Art */
	div.art-portrait, div.art-landscape, div.art-square{
		border: 5px ridge var(--CharacterB-Border);
		padding: 5px;
		border-radius: 5px;
		overflow: clip;
		background-color: #000;
	}
	
	/* Fitting the Art to the Containter */
	div.art-portrait img, div.art-landscape img, div.art-square img{
		width: 100%;
		height: 100%;
		object-fit: contain;
		background-color: #FFF;
		transition: all 0.5s ease;
	}
	
	/* Sizing for Portrait-oriented Art */
	div.art-portrait{
		width: 200px;
		height: 300px;
	}
	
	/* Sizing for Landscape-oriented Art */
	div.art-landscape{
		width: 300px;
		height: 200px;
	}
	
	/* Sizing for Square-shaped Art */
	div.art-square{
		width: 200px;
		height: 200px;
	}
	
	/* Art Filter, Unfocused */
	img{
		filter: blur(1px) brightness(80%) grayscale(50%);
	}
	
	/* Update Piece Border for Commissioned Pieces */
	div[type="comm"]{
		border-color: var(--CharacterD-Border);
	}
	
	/* Styling and Positioning for Title Placard */
	div.title{
		margin-top: 5px;
		text-align: center;
		margin-inline: auto;
		width: 140px;
		padding: 3px 3px;
		background-color: var(--Header-Button);
	}
	
	/* Hover Behavior for Art */
	div.art-portrait:hover, div.art-landscape:hover{
		transform: translateY(-5px);
		box-shadow: 0 3px 2px #00000080;
	}
	
	/* Removing Filters for Art */
	img:hover, img:focus{
		filter: none;
	}
}

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