#toggle_screen {
	display: none;
}

@media screen and (max-width: 1500px) {
	html {
		font-size: 0.57em;
	}
}

@media screen and (max-width: 1400px) {
	html {
		font-size: 0.55em;
	}
}

@media screen and (max-width: 1300px) {
	html {
		font-size: 0.5em;
	}
}

@media screen and (max-width: 1000px) {
	html {
		font-size: 0.45em;
	}
}

@media screen and (max-width: 950px) {
	html {
		font-size: 0.4em;
	}
}

@media screen and (max-width: 900px) {
	html {
		font-size: 0.35em;
	}
}

@media screen and (max-width: 700px) {
	html {
		font-size: 0.3em;
	}
}

@media screen and (max-height: 580px) and (max-width: 1024px) and (orientation: landscape) {
	#toggle_screen {
		display: none !important;
	}
	.mobile-control {
		display: flex;
	}

	main {
		display: flex;
		height: 100%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		margin-top: 0rem;
		max-width: 256rem;
	}

	.menu-atf {
		width: 100%;
	}

	canvas {
		width: 100vw;
		height: 100vh;
	}

	.game-title {
		display: none;
	}

	.game-description-atf {
		width: 100%;
	}

	.game-description {
		background: var(--orange);
	}

	.game-result-container {
		width: 100%;
	}
}

@media screen and (orientation: portrait) {
	#toggle_screen {
		z-index: 999;
		background-color: var(--orange);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		& img {
			width: 70%;
		}
	}
}