:root, [data-selected-theme="dark"] {
	--background: radial-gradient(#2b2917, #0f0f0d);
	--text: #18180E;
	--link: #777359;
	--link-hover: #938E6E;
	--inner-nav: #0f0f0d;
	--caption: #777359;
	--inner-caption: #938E6E ;
	--shadow: #0F0E08;
}

/* Light Theme */
[data-selected-theme="light"] {
	--background: radial-gradient(#B0B394, #8D894E);
	--text: #C7C3AD;
	--link: #303621;
	--link-hover: #4A5233;
	--inner-nav: #a39e79;
	--caption: #a39e79;
	--inner-caption: #363429;
	--shadow: #545438;
}

/* Fonts */
@font-face {
	font-family: AGBook;
	src: url('../fonts/AG-Book-Rounded-Regular.otf');
}

@font-face {
	font-family: BFA;
	src: url('../fonts/BatmanForeverAlternate.ttf');
}

body {
	background: var(--background);
	font-family: AGBook, sans-serif;
	min-height: 100vh;
	margin: 0 auto;
	min-height: 100vh;
	font-size: 1rem;
	box-sizing: border-box;
}

.gallery-nav {
	font-family: BFA;
	font-size: 1.3rem;
	list-style: none;
	display: flex;
	justify-content: center;
	padding: 0;
	gap: 1rem;
	margin: 5vh;
}

.gallery-nav li {
	padding: 0.6rem 5rem 0.6rem 5rem;
	border: solid 2px var(--link);
	background: var(--inner-nav);
}

.gallery-nav li:hover {
	border: solid 2px var(--link-hover);
}

.gallery-nav a {
	color: var(--link);
	text-decoration: none;
}

.gallery-nav a:hover {
	color: var(--link-hover);
}

.gallery-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	gap: 1rem;
	margin: 2vw;
}
	
.gallery-portrait, .gallery-landscape, .gallery-square {
	max-width: 20vw;
	background: var(--caption);
	box-shadow: 10px 5px 5px var(--shadow);
}

.gallery-wrapper img {
	aspect-ratio: 1 / 1;
    object-fit: cover;
	width: 100%;
    transition: aspect-ratio 750ms ease-in-out;
}

.gallery-portrait img:hover {
	aspect-ratio: 0.8;
}

.gallery-landscape img:hover {
	aspect-ratio: 4/3;
}

.gallery-wrapper p {
	margin: 0 2vw;
	padding: 1rem;
	color: var(--text);
	background: var(--inner-caption);
	font-family: monospace;
	font-size: 0.9rem;
}

 @media screen and (max-width: 700px) {
	.gallery-nav {
		flex-direction: column;
	}
  
	.gallery-portrait, .gallery-landscape, .gallery-square {
		max-width: 40vw;
	} 
}