body {
	overflow: hidden;
	touch-action: none;
}

canvas {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	margin: auto;
}

h2 {
	font-size: 32;
	font-weight: 1000;
	font-family: 'Roboto', sans-serif;
	text-decoration: underline;
}

#topbar {
	z-index: 1;
	position: absolute;
	height: 8vh;
	width: calc(100vw - 4vh);
	padding: 2vh;
	top: -14vh;
}

li {
	margin-bottom: 0.5%;
}

.help {
	position: absolute;
	flex-direction: column;
	align-items: center;
	z-index: 10;
	font-size: 32;
	font-family: 'Roboto', sans-serif;
	width: 30vw;
	text-align: center;
	display:none;
}

.arrow {
	
	font-size: 64;
	margin-left: 2vw;
}

#box_help {
	top: 4vh;
	left: 4vw;
}

#spinner_help {
	bottom: 4vh;
	right: 4vw;
}

#title {
	border: solid;
	border-color: black;
	border-width: 0.5vh;
	background-color: white;
	padding: 1vh;
	font-family: 'Roboto', sans-serif;
	font-size: 5vh;
	float: left;
    outline:none;
    line-height: 100%;
}

#back {
	border: solid;
	border-color: black;
	border-width: 0.5vh;
	background-color: white;
	padding: 1vh;
	font-family: 'Roboto', sans-serif;
	font-size: 5vh;
	float: right;
    outline:none;
    height: 100%;
    line-height: 100%;
}

#back:hover {
	background-color: lightgrey;
}

.bottom_box {
	border: solid;
	border-color: black;
	border-width: 0.5vh;
	background-color: white;
	z-index: 1;
	position: absolute;
	height: 81vh;
	width: calc(100vw - 9vh);
	padding: 2vh;
	margin: 2vh;
	bottom: -90vh;

	font-size: 40;
	font-family: 'Noto Sans', sans-serif;
}