@font-face {
  font-family: fOnteX sans-serif; /* set name */
  src: url(./fOnteX.ttf); /* url of the font */
}

body,
html {
	margin: 0;
}
#map {
	height: 100vh;
	width: 100vw;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: -1;
}

.loader {
	--color-1: black;
	--size: 1px;
	width: calc(48 * var(--size));
	height: calc(48 * var(--size));
	border: calc(5 * var(--size)) solid var(--color-1);
	border-bottom-color: transparent;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}

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

.maplibregl-popup-content {
	font-family: "Dosis", sans-serif;
	font-size: 14px;
}

.popup-header {
	text-align: center;
	font-size: medium;
	font-weight: bold;
	color: white;
	padding: 8px;
}

.popup-header.closed {
	background-color: #e31837;
}

.popup-header.open {
	background-color: #0070bb;
}

#controls {
	margin-left: 16px;
}

#controls ul {
	border-radius: 32px;
	background-color: white;
	padding: 16px;
	width: 60px;
	list-style: none;
	font-family: "Dosis", sans-serif;
	font-weight: bold;
	font-size: 20px;
}

.disabled {
	display: none;
}
.xotext {
	font-family: fOnteX sans-serif;
	text-align: center;
	font-size: 18px;
}

#xo{
	text-align: center;
}

#xo .x{
	height: 18px;
	width: 18px;
}

#xo .o{
	height: 20px;
	width: 20px;
}