:root {
	--background-color: #fff7f7;
	--header-color: #d46a64;
	--header-stroke-color: #550000;
	--text-color: #000000;
	--collapsible-background-color: #AA3939;
	--collapsible-active-background-color: #D46A6A;
	--collapsible-color: #FFAAAA;
	--collapsible-active-color: #550000;
	--explanation-background-color: #FFAAAA;
}

body {
	background-color: var(--background-color);
	color: var(--text-color);
	text-align: center;
	font-family: 'Courier New';
	font-size: 20px;
}

h1 {
	color: var(--header-color);
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: var(--header-stroke-color);
	font-size: 80px;
	font-family: 'Helvetica';
	margin-bottom: 20px;
}

p {
	width: 80vw;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#settings-div {
	width: max(40vw, 800px);
	margin-left: auto;
	margin-right: auto;
	border-style: solid;
	border-width: 2px;
	padding: 10px;
	margin-top:10px;
}

.settings-line {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 2px;
}

#map {
	height: 80vh;
}

table {
	width: min(92vw, 800px);
	margin-left: auto;
	margin-right: auto;
	border: solid 1px;
	max-height: 50vh;
	overflow-y: scroll;
}

th {
	border: solid 1px;
	width: min(23vw, 200px);
}

td {
	border: solid 1px;
}

@media only screen and (max-width: 800px) {
	.hidable {
		display: none;
	}

	h1 {
		font-size: 60px;
	}

	table {
		width: min(90vw, 400px);
	}

	th {
		width: min(45vw, 200px);
	}

	#settings-div {
		width: 80vw;
	}

	.settings-line {
		display: flex;
		flex-direction: column;
	}
}