* {
	padding: 0;
	margin: 0;
	background-color: #000;
	color: #FE9;
	font-size: 16px;
	font-family: Georgia, 'Times New Roman', Times, serif;
}

.hidden {
	opacity: 0;
	transition: opacity 1s;
}

.visible {
	opacity: 1;
	transition: opacity 2s;
}

.wrapper {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.flex-1 { flex-grow: 1; }
.flex-2 { flex-grow: 2; }
.flex-3 { flex-grow: 3; }
.flex-4 { flex-grow: 4; }
.flex-5 { flex-grow: 5; }
.flex-6 { flex-grow: 6; }
.flex-7 { flex-grow: 7; }
.flex-8 { flex-grow: 8; }
.flex-9 { flex-grow: 9; }

.nav {
	position: fixed;
	top: 40px;
	left: 64px;
	z-index: 1000;
	border: 2px solid #fa6;
	padding: 12px;
}

.nav a {
	font-size: 1em;
	color: #fa6;
	font-weight: bold;
	text-decoration: none;
}

.instructions {
	font-size: 2em;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
	box-shadow: 2px 20px 20px 20px #000;
	width: 100vw;
}

.info {
	justify-content: center;
	align-items: center;
	margin: 1em auto;
	background-color: #000;
	z-index: 999;
	box-shadow: 2px -20px 20px 20px #000;
	width: 100vw;
	align-items: center;
	display: flex;
}

.info h1 {
	font-size: 2em;
	font-weight: 400;
	text-align: center;
	margin: 1em;
	max-width: 800px;
}

.info p {
	font-size: 1.25em;
	text-align: left;
	max-width: 800px;
}

model-viewer {
	width: 100vw;
	--poster-color: #000;
	--progress-mask: #000;
}

*:focus {
	outline: none !important;
	box-shadow: none !important;
}