body {
	color: #000000;
	font-family: "Courier", monospace;
	font-family:	monospace;
	font-size:	3vh;
	background-color: #000000;
	margin: 0px;
	overflow: hidden;

	/*grid positioning is used for the canvas / settings overlap*/
	display: grid;
	place-items: center;
}

@media (min-height: width) {
	body {
		background-color: #800080;
	}
}

canvas {
	/*for grid positioning*/
	grid-area: container;
	grid-column: 1;
	grid-row: 1;

	image-rendering: pixelated;
}

/*menus*/
.settings_container {	
	/*for grid positioning*/
	grid-area: container;
	grid-column: 1;
	grid-row: 1;
	z-index: 1; /*positions settings DOM elements over the canvas*/
}

.setting_panel {
	display: none;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction:	column;
	height: 100vh;
}

.center_button {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction:	row;
	height: 4vh;
	margin-top: 4vh;
}

.another_box {
	background-color: white;
	border-radius: 2vh;
	padding: 4vh;
	width: 40vw;
}

.slideContainer {
	width: 100%;
}

.checkboxContainer {
	display: flex;
	width: 100%;
}

.slider {
	-webkit-appearance:	none;
	width: 100%;
	height: 2em;
	background: #808080;
	border-radius: 1em;
	/*outline: 0.25em #a0a0a0 solid;*/
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width:	3em;
	height:	3em;
	background: #000000;
	border-radius: 1.5em;
}

.custom_checkbox {
	width: 3vh;
	height: 3vh;
	/*-webkit-box-shadow: 0px 0px 0px 0.125vh rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 0px 0.125vh rgba(0,0,0,1);*/
}

.custom_radio {
	width: 3vh;
	height: 3vh;
}

.toggle:checked:after {
	color: pink;
}

.toggle:hover {
	background-color: #a0a0a0;
}

.simple_button {
	border: none;
	background-color: white;
	text-align: center;
	cursor: pointer;
	border-radius: 1vh;
	font-size:	3vh;
	padding: 2vh;
	margin: 1vh;
	border: none;
	border-radius: 1vh;
	border:  solid 0.5vh;
}

.simple_button.b {
	background-color: black;
	color: white;
	padding-left: 6vh;
	padding-right: 6vh;
}


.simple_button.b:hover {
	background-color: white;
	color: black;
	border:  solid 0.5vh;
}

.text_field {
	font-size: 3vh;
	width: 6vh;
}

/*specific*/
.fog_box_enabled {
	margin-left: 3vh;
}

.fog_box_disabled {
	margin-left: 3vh;
	color: #ccc;
}

.disabled {
	color: #ccc;
}


/*input settings*/
.key_bindings {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction:	column;
	height: 50vh;
}

.binding_container {
	display: flex;
	justify-content: center;
}

.binding_label {
	color: black;
	/*display: flex;*/
	width: 16vh;
}

.binding_button {
	background-color: black;
	color: white;
	font-family:  monospace;
	font-size:  4vh;
	/*display: flex;*/
	border: none;
	border-radius: 1vh;
	border:  solid 0.5vh;
	width: 3em;
}

.binding_button:hover {
	background-color: white;
	color: black;
	border:  solid 0.5vh;
}