body {
	margin: 0px;
	position: relative;

	width: 100vw;
	height: 100vh;

	display: flex;
	justify-content: center;
	align-items: center;

	background-image: url(../images/page.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

canvas {
	background-color: transparent;
	width: min(100vw, calc(100vh * 4 / 3));
	height: auto;
}


.logo {
	position: absolute;
	z-index: 1;
	/* canvas geometry: 800x600 scaled to min(100vw, 133.33vh), centered */
	--gw: min(100vw, calc(100vh * 4 / 3));
	--gh: min(calc(100vw * 3 / 4), 100vh);
	/* header strip inside the game is 75/600 = 12.5% of canvas height */
	--bar: calc(var(--gh) * 0.125);
	width: calc(var(--bar) * 0.9);
	height: calc(var(--bar) * 0.9);
	top: calc((100vh - var(--gh)) / 2 + var(--bar) * 0.05);
	left: calc((100vw - var(--gw)) / 2 + var(--bar) * 0.2);
	background-image: url('../images/favicon.webp');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}