html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

body {
	margin: 0;
	padding: 0;
	background: #1e1e1e;
	font-family: "Asap", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
}

h2 {
	color: #FBC52E;
	margin: 1rem 0;
}

p {
	margin: 1rem 0;
}

strong {
	font-weight: 700;
}

a {
	color: #FBBF2C;
	text-decoration: none;
	border-bottom: 0.125em solid rgba(251, 191, 44, .33);
}
a:hover, a:focus-visible {
	border-bottom-color: #FBBF2C;
}

.nowrap {
	white-space: nowrap;
}

.upper {
	display: block;
	padding: 2rem 0;
	padding: max(2rem, calc(33vh - 250px)) 0;
	background: url("assets/bg-stripes.png") center;
	border-bottom: 1px solid #333;
	overflow-x: scroll;
}

#game {
	display: block;
	margin: 0 auto;
	background: #000;
	border: none;
	outline: 1px solid #666;
}

.section {
	text-align: justify;
	margin: 2rem auto 3rem;
	max-width: 800px;
	padding: 0 1.5rem;
}

@media (min-width: 630px) {
	.too-narrow {
		display: none;
	}
}