style.scss

body {
	margin: 0;
	font-family: 'Lucida', sans-serif;
}

div#game_board {
	display: grid;
	max-width: 1800px;
	grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
	justify-items: center;
	grid-gap: 0;

	@media (min-width: 1200px) {
		canvas#game {
			grid-row: 1/3;
		}
	}
}

div.control_board {
	padding: 0.5em;
	grid-column: 1/3;
	justify-self: stretch;
	display: grid;
	grid-column-gap: 1em;
	grid-row-gap: 5px;
	font-size: 0.8rem;
	grid-template-columns: repeat(7, 150px);
	grid-template-rows: 50px;

	@media (min-width: 1800px) {
		grid-column: 2;
		grid-row: 2;
	}

	div.input_legend {
		display: inline-block;
		text-align: center;
		justify-content: center;
		background-image: radial-gradient(#c47777af, rgba(145, 152, 229, 0.589));

		input[type=range].custom-slider {
			padding: 10%;
			border: 1px solid rgb(211, 211, 211);
			width: 80%;
			height: 20%;
		}
	}

	input#dialog_file {
		display: none;
	}

	input[type=number] {
		width: 8ch;
	}

	button {
		background-color: lightgrey;

		&.btn_enabled {
			background-color: rgb(163, 163, 163);
		}

		&:hover {
			background-color: rgba(44, 44, 136, 0.4);
		}
	}
}