:root {
  --dark-accent-color: #2a2623;
  --light-accent-color: #ffffff;
  --control-margin: 20px;
  --control-padding: 12px;
  --control-font: Arial, sans-serif;
}

html, body, #map { width: 100%; height: 100%; margin: 0; }

body { overflow: hidden; color: var(--dark-accent-color); font-family: var(--control-font); }

#map-buttons-container {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.button-fit, .dropdownSelect {
  width: fit-content;
  margin: var(--control-margin);
  padding: var(--control-padding);
  border: 0;
  border-radius: 3px;
  background-color: var(--light-accent-color);
  color: var(--dark-accent-color);
  box-shadow: 2px 2px 3px rgb(0 0 0 / 25%);
  font: 10pt var(--control-font);
  cursor: pointer;
  pointer-events: auto;
}

.button-fit:hover, .dropdownSelect:hover { background-color: #f3f3f3; }
.maplibregl-popup { max-width: 320px; }
.popup-details { border-collapse: collapse; font: 13px/1.35 var(--control-font); }
.popup-details th, .popup-details td { padding: 3px 0; vertical-align: top; text-align: left; }
.popup-details th { padding-right: 10px; }

@media (max-width: 600px) {
  :root { --control-margin: 5px; --control-padding: 5px; }
  .button-fit, .dropdownSelect { font-size: 8pt; }
}