* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
      height: 100vh;
      overflow: hidden;
    }

	.sidebar {
		position: fixed;
		top: 0;
		left: 0;
		width: 300px;
		height: 100vh;
		background-color: darkgreen;
		color: white;
		overflow-y: auto;
		z-index: 10;             /* or your preferred width */
	}


	.sidebar a,
	.sidebar p {
		color: inherit; /* lets inline styles apply */
		text-decoration: none;
		margin-left: 10px;
		line-height: 1.2;
		padding: 2px 0;
		display: block;
	}
	
    .map-container {
		position: absolute;
		top: 0;
		left: 250px;          /* offset by sidebar width */
		right: 0;
		bottom: 0;
		background-color: #ddd;
		overflow: hidden;
    }

    .map-container img {
      width: 100%;
      height: auto;
      display: none;
      position: absolute;
      top: 0;
      left: 0;
    }
	
	.map-wrapper {
      position: relative;
      width: 90%;
      aspect-ratio: 3 / 2; /* Optional, for US/world maps */
    }

    .map-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      position: absolute;
      top: 0;
      left: 0;
      display: none;
    }

    #us-map {
      display: block;
    }

    .highlight {
      position: absolute;
      border: 2px solid red;
      background-color: rgba(255, 0, 0, 0.3);
      display: none;
      pointer-events: none;
      transform: translate(-50%, -50%); /* center the box */
   }
   
   .drop-countdown {
		color: red !important;
		font-size: 15px;
		margin-left: 60px;
		line-height: 1.2;
	}
   
   .point-interest {
		color: red !important;
		font-size: 15px;
	}