@media only screen and (max-width: 800px) {
	html {
		--nav-width: calc(100% - 4em);
	}
	#navigation-container {
		top: 50%;
		height: calc(50% + 1em);
		margin-top: calc(50vh);
		margin-left: unset;
		overflow: hidden;
		padding-top: 0px;
		padding-bottom: 0px;
	}
	.fullsize-navigation > #navigation-container {
		margin-left: unset;
		margin-top: 0;

	}
	#nav-toggle-button {
		display: none;
	}

	#nav-toggle-button-mobile {
		display: block;
		position: fixed;
		transform: rotate(-90deg);
		margin-right: 0;
		top: calc(100% - 2em);
		left: unset;
	}
	.fullsize-navigation #navigation-container #nav-toggle-button {
		position: fixed;
	}
	#canvas-button {
		height: 100%;
		top: 0;
	}
	.fullsize-navigation > #canvas-button {
		height: 60%;
	}
	#info-container {
		overflow: scroll;
	}

	.bottom-infos {
		position: unset;
	}

	canvas {
		top: 0;
	}
	#nav-toggle-button {
		right: 1em;
	}
	#nav-toggle-button-mobile {
		right: 1em;
	}
	#info-overlay-container {
		display: unset;
	}
}

@media only screen and (max-height: 650px) {
	#info-container {
		overflow: scroll;
	}

	.bottom-infos {
		position: unset;
	}
}

::-webkit-scrollbar {
	width: 0px;
}

::-webkit-scrollbar-track {
	color: none;
}

::-webkit-scrollbar-thumb {
	background: none;
}

@media only screen and (max-width: 580px) {
	#navigation-container {
		padding-left: 2em;
		grid-template-columns: auto;
		overflow-y: scroll;
		height: 50%;
		width: -webkit-fill-available;
	}
	.bottom-infos{
		margin-bottom: 100px;
	}
	.fullsize-navigation > #navigation-container {
		margin-top: 0px;
	}
	#tap-to-play {
		padding:15%;
	}
	#info-container {
		margin-top: 1em;
		overflow: unset;
		width: 100%;
		max-width: unset;
	}
	.bottom-infos {
		margin-top: 2em;
	}
}

@media (hover: none) and (max-width: 580px) {

	#main-container {
		height: -webkit-fill-available;
	}
	#tap-to-play {
		padding:5%;
	}
}