html, body {
	align-items: center;
  display: flex;
	height: 100%;
	justify-content: center;
	margin: 0;
	padding: 0;
	width: 100%;
}

html {	
	flex-direction: column;
}

body {
	background: #ffefff;
	/* background: #120006; */
  flex-direction: row;
	overflow: hidden;
  touch-action: none;
}

canvas {
	display: block;
	margin: auto;
	max-height: 100%;
	max-width: 100%;
	padding: 0;
}

body main {
	position: relative;
}

h1 {
	margin-block-start: 0;
}

.help {
	align-items: center;
	backdrop-filter: blur(7px);
	background-color: rgba(18, 0, 6, 0.6);
	bottom: 24px;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	left: 24px;
	opacity: 0;
	position: absolute;
	right: 24px;
	top: 24px;
	transition: opacity 0.3s ease-out;
}

.help.visible {
	opacity: 1;
}

.loading {
	align-items: center;
	bottom: 0;
	display: flex;
	justify-content: center;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}