/* Basic Reset and Full-Screen Setup */
body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 4096px;
  height: 2160px;
  background-color: black;
}

a {
  color: #fff;
}

/* Map Container for Panning and Zooming */
#map-container {
  width: 4096px;
  height: 2160px;
  overflow: hidden;
  position: relative; /* Relative positioning for the container */
  touch-action: none; /* Prevents touch interference */
}

/* Map Background */
#map {
  width: 100%;
  height: 100%;
  background: url('photos/AOC A2 map.png') no-repeat center;
  background-size: contain;
  position: absolute; /* Position absolute within the container */
  left: 0px;
  top: 0px;
  transform-origin: 0 0;
}

/* Marker Style */
.marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  position: absolute; /* Position absolute within the map */
  transform: translate(-50%, -50%);

  /* make it clickthrough */
  pointer-events: none;
}

/* Menu Style */
#menu {
  position: fixed; /* Keeps the menu in place even when scrolling or panning */
  top: 0;
  left: 0;
  width: 20em; /* Fixed width */
  height: 100%; /* Full height of the viewport */
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
  z-index: 1000; /* Higher than other elements to overlay them */
  color: #fff; /* White text for contrast */
  overflow-y: auto; /* Scrollable if content exceeds viewport height */
  padding: 1em; /* Optional padding */
}

/* Optional: Style menu content */
#menu h2 {
  margin-top: 0;
}

#menu ul {
  list-style: none;
  padding: 0;
}

#menu li {
  margin: 0.5em 0;
}