body, html {
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
  height: 100%; /* Ensure body and html take full height */
}

#fixed-div {
  position: fixed;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Offset for perfect centering */
  border: 3px solid #000; /* Black border */
  border-radius: 8px; /* Rounded corners */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Ensure content fits within the div */
  background-color: white; /* Optional background */
  width: 700px; /* Default width */
  height: 450px; /* Default height */
}

#image2 {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Ensure proportional scaling */
  display: block; /* Ensure proper centering within div */
}

#distance-label {
  position: absolute; /* Position it over the image */
  top: 30px; /* Slightly below the top edge of the div */
  left: 50%; /* Center horizontally within the div */
  transform: translateX(-50%); /* Align center */
  font-size: 18px;
  color: #004b4f;
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent background for readability */
  padding: 2px 10px; /* Padding for readability */
  border-radius: 5px; /* Rounded corners */
  z-index: 2; /* Ensure it stays above the image */
}