body {
	text-align: center;
	background: linear-gradient(180deg,
		rgba(203, 185, 171, 1) 17%,
		rgb(47, 106, 158) 33%,
		rgba(175, 176, 206, 1) 50%,
		rgba(208, 209, 207, 1) 67%,
		rgba(253, 250, 217, 1) 84%,
		rgb(244, 252, 142) 100%
	);
}

header {
	background-color: rgba(66, 136, 68, 0.9);
	height: 100px;
}

/* Minimal nav for this page */
nav {
	border: none;
	background: rgba(250, 235, 215, 0.5);
}

nav a {
	background: none;
}

div > .record {
	scale: 0.8;
	opacity: 0;
	margin: auto;
	display: block;
	width: 400px;
	height: 400px;
	text-align: center;
	animation: fade-in linear forwards;
	animation-timeline: view();
	animation-range: 250px 500px;
}

@keyframes fade-in {
	to { scale: 1; opacity: 1; }
}

.record:hover img, .record:focus img {
	scale: 1.05;
	rotate: 1deg;
}