:root {
	--one: red;
	--two: blue;
	--sidebar-width: 300px;
	--sidebar-offset: var(--sidebar-width);
	--background: black;
	--text: white;
	--highlight: grey;
	--transition-duration: 0.5s;
	--slider: #db3434;
}

@media (prefers-color-scheme: light) {
	:root {
		--background: white;
		--text: black;
		--highlight: darkgrey;
		--slider: #3498db;
	}
}

.debug-tile {
	text-shadow: -1px -1px 0 var(--highlight), 1px -1px 0 var(--highlight), 1px 1px 0 var(--highlight), -1px 1px 0 var(--highlight);
}

.beppie {
	outline: 1px solid var(--one, red);
}

.beppoe {
	outline: 1px solid var(--two, blue);
}

html,
body {
	margin: 0;
	background: var(--highlight);
	font-family: sans-serif;
	color: var(--text);
}

h2, h3 {
	margin: 5px;
	text-align: center;
}

.subheading {
	font-size: 1.1rem;
}

a {
	color: var(--text);
}

#sidebar {
	width: calc(max(var(--sidebar-width), var(--sidebar-offset)) - 25px);
	padding: 15px 10px 0 15px;
	left: min(calc(var(--sidebar-offset) - var(--sidebar-width)), 0px);
	position: absolute;
	background: var(--background);
	top: 0;
	bottom: 0;
	z-index: 1;
	transition: var(--transition-duration);
	overflow-y: auto;
	-ms-overflow-style: none;
	/* for Internet Explorer, Edge */
	scrollbar-width: none;
	/* for Firefox */
	display: flex;
	flex-direction: column;
}

#sidebar::-webkit-scrollbar {
	display: none;
	/* for Chrome, Safari, and Opera */
}

#hide-sidebar {
	position: absolute;
	left: var(--sidebar-offset);
	background: var(--background);
	transition: var(--transition-duration);
}

#toggle-sidebar {
	display: none;
}

#toggle-sidebar:checked~#sidebar,
#toggle-sidebar:checked~#map,
#toggle-sidebar:checked~label {
	--sidebar-offset: 0px;
}

#toggle-sidebar:checked~#map {
	transition-delay: 1ms;
}

.toggle-sidebar-label {
	width: 1.5em;
	height: 1.5em;
	background-color: var(--background);
	background-image: url('expand.svg');
	background-size: 1.5em 1.5em;
	position: absolute;
	z-index: 2;
	left: var(--sidebar-offset);
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: var(--transition-duration);
	cursor: pointer;
	transform: rotate(90deg);
}

#toggle-sidebar:checked~.toggle-sidebar-label {
	transform: rotate(-90deg);
}

section {
	padding: 5px;
	margin: 1px;
	border: var(--highlight) solid 1px;
	border-radius: 5px;
}

#floorSection {
	text-align: center;
}

.slider {
	-webkit-appearance: none;
	appearance: none;
	/* Override default CSS styles */
	width: 80%;
	margin: 0% 10%;
	height: 10px;
	background: #d3d3d3;
	/* Grey background */
	opacity: 0.7;
	/* Set transparency (for mouse-over effects on hover) */
	transition: opacity .2s;
	border-radius: 10px 0px;
	/* same as height, and 0 for only rounding on bottom/top */
}

/* Mouse-over effects */
.slider:hover {
	opacity: 1;
	/* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	/* Override default CSS styles */
	width: 20px;
	/* Set a specific slider handle width */
	height: 20px;
	/* Slider handle height */
	background: url('stairs-icon.png');
	/* staircase image background */
	background-size: 20px 20px;
	cursor: pointer;
	/* Cursor on hover */
}

.slider::-moz-range-thumb {
	width: 20px;
	/* Set a specific slider handle width */
	height: 20px;
	/* Slider handle height */
	background: url('stairs-icon.png');
	/* staircase image background */
	background-size: 20px 20px;
	cursor: pointer;
	/* Cursor on hover */
	border: none;
}

#debugSection, #distanceSection, #searchSection, #hexSettingsSection {
	text-align: center;
	line-height: calc(1em + 5px);
}

.rightAlign {
	text-align: right;
}

#debugSection input {
	margin: 1px;
}

#debugSection code, #distanceSection code {
	padding: 2px;
	background-color: var(--highlight);
}

footer {
	text-align: center;
	margin-top: auto;
}

#map {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--sidebar-offset);
	right: 0;
	z-index: -1;
	outline: none;
	transition-delay: var(--transition-duration);
}

#loader {
	border: 10px solid var(--background);
	border-top: 10px solid var(--slider);
	border-bottom: 10px solid var(--slider);
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
	animation-play-state: running;
	z-index: 1000;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
	background-image: url("icon.png");
	background-size: cover;
}

#loader.paused{
	animation-play-state: paused;
	display: none;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}