* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 100vh;
	background-color: #faf6e5;
	font-family: Helvetica, Verdana, sans-serif;
}

.header-container,
.gallery-container {
	width: 90vw;
	height: auto;
	margin: 0 auto;
	padding: 1em;
}

.album-container {
	display: flex;
	flex-wrap: wrap;
}

.album-container a {
	text-decoration: none;
	flex-grow: 1;
	height: 150px;
}

.album-container img {
	max-height: 100%;
	min-width: 100%;
	object-fit: cover;
}

.album-container::after {
	content: "";
	flex-grow: 10;
}

.image-container {
	text-align: center;
	background-color: #000;
}

.image-container img {
	display: inline-block;
	max-width: 100vw;
	max-height: 85vh;
}

.control-btn {
	display: inline-block;
	text-decoration: none;
	padding: 0.5em;
	color: #fff !important;
}

.control-btn:hover {
	text-decoration: none;
	background-color: #333;
	color: #fff;
}

.control-btn.hidden {
	visibility: hidden;
}

@media (prefers-color-scheme: dark) {
	html, body {
		background-color: #151517;
		color: #fcf8e2;
	}

	a {
		color: #3f6e90;
	}

	a:visited {
		color: #9c6992;
	}
}