@font-face {
	font-family: 'DCPixel';
	src: url('./dcpixel/aa.woff2') format('woff2'),
		url('./dcpixel/aa.woff') format('woff'),
		url('./dcpixel/aa.ttf') format('truetype');
}
@font-face {
	font-family: 'DCPixelCond';
	src: url('./dcpixel/cond.woff2') format('woff2'),
		url('./dcpixel/cond.woff') format('woff'),
		url('./dcpixel/cond.ttf') format('truetype');
}

body {
	color: #fff;
	background: #030203 url(data:image/gif;base64,R0lGODlhIAAgAPEAACggIzMoKEI1NgAAACH5BAAAAAAALAAAAAAgACAAAALHTICpebaPzAFzKulgFYHHJwlcdiVjR1qe0y1b03nUTGHSbMU6IH+RnrsIaphRCSFiXFA2R0+ZsURONRwJQnM1KJzTNYttihrD6nHLgNnG5o/UxxqT1b7jEjYqf+vgNPLG4gKiUcHy9VZSuLXXxwiCgZXmKESllNaFKLlSpiXHBLECQ/NSJFPBFfM0mnfCCZLkV+NVFJgSRApZxBfpR2a1y0vU1MT7ZmjgOXRj51YFdMA2CnwnO0UXDJaR9xOE3QuImNl4bBNZAAA7);
	font: 16px/1 'DCPixel', 'DIN', 'Open Sans', sans-serif;
	margin: 0 auto;
	text-align: center;
	image-rendering: pixelated;
}
body:not(.mobile) {
	width: 650px;
	transition: width 300ms ease-in-out;
}

canvas {
	width: 100%;
	aspect-ratio: 650 / 450;
}
body.mobile canvas {
	margin: 0 auto;
	width: 100vw !important;
	height: calc(100vw * (450 / 650)) !important;
}

footer, footer a {
	font: 16px/1 'DCPixelCond', 'DCPixel', 'DIN', 'Open Sans', sans-serif;
	color: #ae9079;
}
footer a:hover {
	color: #dfc27d;
}

button {
	color: #dfc27d;
	background: #341b18;
	border: 1px solid #c89c65;
	border-radius: 4px;
	padding: 4px 8px;
	margin: 4px 2px;
}

div.portrait {
	display: none;
	padding: 8px;
}

@media (display-mode: browser) and (min-width: 1300px) and (min-height: 900px) {
	body:not(.mobile) {
		width: 1300px;
		background-size: 64px 64px;
	}
	body:not(.mobile), body:not(.mobile) footer, body:not(.mobile) footer a {
		font-size: 32px;
	}
}

@media screen and (orientation: landscape) {
	body.mobile canvas {
		margin: 0 auto;
		width: calc(100vh * (650 / 450)) !important;
		height: 100vh !important;
	}
}
@media screen and (orientation: portrait) and (max-width: 650px) {
	div.portrait {
		display: block;
	}
}