@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
:root {
	--col-bg: #16181c;
	--col-text: #ccc;
	--z-main: 50;
	--z-controls: 60;

	font-family: "Rubik", Helvetica, sans-serif;
	font-size: 11pt;
	color: var(--col-text);
	user-select: none;

	color-scheme: dark;
	background-color: var(--col-bg);

	/* from whencaniuse: */
  /* --col-visited:          rgb(from var(--col-brand) calc(r + 40) g calc(b + 40)); */
  /* --col-visited-hover:    hsl(from var(--col-visited) h s calc(l + 12)); */
  /* --col-bg:               #222120; */
  /* --col-bg-dark:          hsl(from var(--col-bg) h s calc(l - 4)); */
  /* --col-text:             #ccc; */
  /* --col-text-dim:         hsl(from var(--col-text) h s calc(l - 20)); */
  /* --col-text-faint:       hsl(from var(--col-text) h s calc(l - 36)); */
  /* --col-form-face:        hsl(from var(--col-bg) h s calc(l + 6)); */
  /* --col-form-face-trim:   hsl(from var(--col-bg) h s calc(l + 9)); */
  /* --col-form-face-hilite: hsl(from var(--col-bg) h s calc(l + 12)); */
  /* --col-form-outline:     white; */
  /* --col-support:          #80cd32; */
  /* --col-code-bg:          #0004; */

}
body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	box-sizing: border-box;
	overflow: hidden;

	display: flex;
	flex-direction: column;
	place-items: center;
	justify-content: center;
}

main {
	z-index: var(--z-main);
	flex-grow: 0;
}
canvas {
	width: 100%;
	height: 100%;
	background-color: black;
	border-radius: 0;
	image-rendering: pixelated;
}
#canvas-container {
	width: 100%;
	max-width: calc(100dvh * (256/224));
	aspect-ratio: 256/224;
	box-shadow: 0px 20px 60px rgba(0, 0, 0, .6);
}
#keyboard-controls-list {
	opacity: 0.3;
	margin: 0;
	position: absolute;
	left: 0;
	bottom: 0;
	transform: translate(calc(-100% - 16px));
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 16px;
	text-transform: capitalize;
	font-size: 18pt;
	dt {
		text-align: right;
		font-weight: 100;
	}
	dd {
		margin: 0;
		font-weight: bold;
	}
}

@media only screen and (min-width: 1024px) {
	:root {
		font-size: 14pt;
	}
	main {
		flex-direction: row;
	}
	canvas {
		border-radius: 4px;
	}
	#canvas-container {
		max-width: unset;
	}
}