:root {
	--border_gap: 10px;
	--primary: #eeeeee;
	--background: #242424;
	--placeholder: #434343;
}

body {
	background-color: var(--background);
	color: var(--primary);
	margin: 0;
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

body::-webkit-scrollbar {
	display: none;
}

html {
	font-size: 20px;
	font-family: sans-serif;
}

.image-gallery {
	margin: 1rem;
	column-count: 2;
	column-gap: var(--border_gap);
	line-height: 0;
}

.image-gallery > li {
	list-style-type: none;
	margin-bottom: var(--border_gap);
	border-radius: var(--border_gap);
	position: relative;
	transition: opacity 0.4s ease-in-out, transform 0.5s ease-in-out, background-color 0.3s ease-in-out;
}

.image-gallery li img {
	display: inline-block;
	width: 100%;
	object-fit: cover;
	margin: 0;
	transition: 6s filter ease-in-out, 0.6s -webkit-filter ease-in-out, opacity 0.4s ease-in-out;
	border-radius: inherit;
	z-index: 1;
}
.overlay {
	opacity: 0;
	position: relative;
	z-index: 10;
	text-align: center;
	transition: top 0.4s ease-in-out, opacity 0.4s ease-in-out;
	top: -2rem;
}

.image-gallery li:hover > .foreground {
	filter: grayscale(0);
}

.grayscale .foreground {
	filter: grayscale(75%) brightness(40%);
}

.highlight .foreground {
	z-index: 50;
}

.highlight .background {
	opacity: 1;
	z-index: 25;
}

.highlight > .overlay {
	top: 1rem;
	opacity: 1;
}

.foreground {
	position: relative;
}

.background {
	filter: blur(24px);
	position: absolute;
	opacity: 0;
	transform: scale(1.025);
	z-index: 1;
	top: 2px;
	left: 0;
}

h1 {
	margin: 0;
	font-size: 2rem;
}

h2 {
	font-size: 1.4rem;
}
header {
	z-index: 100;
	background-color: var(--background);
	margin: 0;
	box-sizing: border-box;
	position: sticky;
	top: -4.5rem;
	left: 0px;
	padding: 0.8rem;
	padding-top: 1.5rem;
	text-align: center;
}

nav {
	display: flex;
	justify-content: center;
	gap: 2rem;
}

nav a {
	color: var(--primary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

nav a:visited {
	color: var(--primary);
	text-decoration: none;
}

nav a:hover {
	border-bottom: 1px solid var(--primary);
}

.blacked {
	transform: rotateX(180deg);
	background-color: var(--placeholder);
}

.loading {
	min-height: 5vh;
}

.blacked img {
	opacity: 0;
}

@media screen and (max-width: 650px) {
	.image-gallery {
		column-count: 1;
	}
}

@media screen and (min-aspect-ratio: 4/5) {
	.image-gallery {
		column-count: 3;
	}
}

@media screen and (min-aspect-ratio: 1/1) {
	.image-gallery {
		column-count: 4;
	}
}

@media screen and (min-aspect-ratio: 4/3) {
	.image-gallery {
		column-count: 5;
	}
}