body {
	margin: 0;
	background: #361F17 url(background.jpg);
	background-size: cover;
	background-position: 50% 0;
	background-attachment: fixed;
}

header, footer {
	position: fixed;
	text-align: center;
	z-index: 1;
}

header {
	border-radius: 0.5rem;
	bottom: calc(100% + 1rem);
	transition: bottom 2s;
	font-family: Tangerine;
	background: url(cutout.svg);
	border: solid 0.5rem #fff;
	padding: 4rem 0;
	-webkit-filter: drop-shadow(0 0 0.25rem);
	left: 30%;
	width: 40%;
	box-sizing: border-box;
	font-size: x-large;
}

.top > header {
	bottom: calc(50% - 6rem);
}

h1, p {
	margin: 0;
}

ul {
	-webkit-column-width: 20rem;
	-webkit-column-gap: 0;
	-moz-column-width: 20rem;
	-moz-column-gap: 0;
	column-width: 20rem;
	column-gap: 0;
	margin: 0;
	padding: 1rem 0.5rem;
}

li {
	display: block;
	list-style: none;
	box-shadow: 0 0 0.25rem;
	margin: 0 0.5rem 1rem 0.5rem;
	position: relative;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	background: #fff url(loading.svg) 50% 50% / 2rem no-repeat;
}

img {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	outline: solid 1px rgba(255, 255, 255, 0.15);
	outline-offset: -1px;
}

.top > footer {
	opacity: 1;
}

footer {
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	transition: opacity 2s;
	font-size: x-small;
	font-family: sans-serif;
	background: #fff;
	padding: 0.5rem;
	box-shadow: 0 0 0.25rem;
}