body, main, figure {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body {
	font-family: sans-serif;
	background-color: #f6f6f6;
	margin: 0;
	padding: 0;
	height: 100vh;
	gap: 4px;
}

main {
	flex: 1 1 auto;
}

header {
	max-width: 944px;
	aspect-ratio: 944/220;
}

header nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
	border-bottom: 3px solid black;
}

header nav img {
	display: block;
	width: 100%;
}

figure {
	text-align: center;
	flex: 1 1 0;
	min-height: 0;
	max-width: 100%;
	gap: 4px;
}

figure img {
	border: 3px solid black;
	max-width: 100%;
	max-height: 100%;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	object-fit: contain;
}

figcaption {
	font-size: 24px;
	white-space: nowrap;
}

footer {
	text-align: center;
	font-size: 14px;
}

footer nav {
	display: inline;
}

footer a {
	text-decoration: none;
}

footer a:hover {
	text-decoration: underline;
}

.bonus {
	flex: 1 1 auto;
}

#all-rhinos {
	width: 100%;
}

.all-rhinos-month {
	width: 100%;
	max-width: 770px;
}

.all-rhinos-thumbnails {
	display: grid;
	grid-template-columns: repeat(auto-fill, 146px);
	justify-content: center;
	gap: 10px;
}

.all-rhinos-thumbnails img {
	border: 3px solid black;
}

.all-rhinos-thumbnails a {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 146px;
	text-align: center;
        text-decoration: none;
        color: black;
}

.all-rhinos-thumbnails h2 {
	grid-column: 1 / -1;
}

a.disabled {
	visibility: hidden;
}

.maintenance-banner {
	width: 100%;
	background-color: yellow;
	text-align: center;
	padding: 10px 0;
	margin-bottom: 10px;
}

.shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(60deg, transparent 25%, white 45%, white 55%, transparent 75%);
	animation: shine 4s infinite;
	pointer-events: none;
	transform: translateX(-100%);
}

.shine-container {
	position: relative;
	display: inline-block;
	overflow: clip;
}

@keyframes shine {
  0% { transform: translateX(-100%); }
  20% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}