:root {
	--background: #fff;
	--foreground: #111;

	/* Shadows: https://codepen.io/sdthornton/pen/wBZdXq */
	--shadow-x-small: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	--shadow-small: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	--shadow-medium: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
	--shadow-large: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
	--shadow-x-large: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}

html {
	background-color: var(--background);
	font: 100% / 1.8 system-ui;
	color: var(--foreground);
}

body {
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font: 100 3rem system-ui;
	margin: 0 0 1rem;
}

h2 {
	font-size: 1.2rem;
}

h3 {
	font-size: 1rem;
}

h4 {
	font-size: 1rem;
}

h5 {
	font-size: 1rem;
}

h6 {
	font-size: 1rem;
}

p {
	margin: 0 0 1rem;
}

output {
	display: inline-block;
	font-size: 2rem;
	font-weight: 900;
}

/* UI */
#ui {

}

	/* Each UI card */
	#ui > * {
		--ui-padding: 2.5%;

		background: rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(20px);
		color: white;

		position: fixed;
		z-index: 99;

		padding: 2rem;
		border-radius: 0.5rem;
		/* box-shadow: var(--shadow-x-small); */
	}

	/* Top left */
	#ui > :nth-of-type(1) {
		top: var(--ui-padding);
		left: var(--ui-padding);
	}

	/* Top center */
	#ui > :nth-of-type(2) {
		top: var(--ui-padding);
		left: 50%;
		transform: translateX(-50%);
	}

	/* Top right */
	#ui > :nth-of-type(3) {
		top: var(--ui-padding);
		right: var(--ui-padding);
	}

	/* Bottom right */
	#ui > :nth-of-type(4) {
		bottom: var(--ui-padding);
		right: var(--ui-padding);
	}

	/* Bottom center */
	#ui > :nth-of-type(5) {
		bottom: var(--ui-padding);
		left: 50%;
		transform: translateX(-50%);
	}

	/* Bottom left */
	#ui > :nth-of-type(6) {
		bottom: var(--ui-padding);
		left: var(--ui-padding);
	}

	/* Hide empty */
	#ui > :empty {
		display: none;
	}

		#ui > * > :last-child {
			margin-bottom: 0;
		}

#ui .debug {
	right: 5%;
	top: 5%;
}

/* GAME */
#game {
	position: fixed;
	inset: 0;
	z-index: 98;
	margin: 0;
}

	#game canvas {
		position: absolute;
		inset: 0;
	}