body {
	max-width: 780px;
	margin: 0 auto;
	padding: 20px;
}

:root {
	--padding: 20px;
}

h1 {
	font-weight: normal;
}

header {
	text-align: center;
}

footer {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

li, p {
	line-height: 1.5;
}

li {
	margin-bottom: 1em;
}

.img-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.img-grid a {
	align-items: flex-end;
	display: flex;
	margin-bottom: 40px;
	margin-bottom: var(--padding);
	max-height: min(calc(100vh - 80px), calc(100vw - 40px));
	max-height: min(calc(100vh - 80px), calc(100vw - var(--padding)));
	overflow: hidden;
}

.img-grid a.centered {
	align-items: center;
}

.img-grid a.top {
	align-items: flex-start;
}

.img-grid img {
	display: block;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
}

.img-view {
	align-items: center;
	display: flex;
	flex-direction: column;
}

.img-view img {
	height: 100%;
	max-height: 100vh;
	max-width: 100%;
}

img.vertical {
	width: 100%;
}

div.nav {
	display: flex;
	justify-content: space-between;
	width: 100%;
}


@media(min-width:600px) {
	header {
		text-align: left;
	}
}

@media(min-width:820px) {
	:root {
		--padding: min(40px, calc((100vw - 820px) / 2 + 20px));
	}
}

@media(prefers-color-scheme: dark) {
	body {
		background: #333;
		color: #ccc;
	}

	a {
		color: #8af;
	}

	a:visited {
		color: #c8f;
	}
}

@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation: fade 0.3s ease both;
}

@keyframes fade {
	from {
		opacity: 0;
	to {
		opacity: 100%;
	}
}