html, body {
  height: 100%;
  margin: 0;
  text-align: center;
  font-family: Arial, sans-serif;
  background-color: #1d1f1e;
  display: flex;
  flex-direction: column;
}

div {
  display: flex
}

.nav-button { 
  cursor: pointer; 
  font-size: 14px; 
  padding: 5px; 
}

#content-wrapper {
  display: flex;
  flex-direction: row;
  height: 90vh;
}

#photo-container {
  flex: 2; /* Takes 2/3 of the height */
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 0.5rem solid #1d1f1e;
}

#map {
  flex: 1; /* Takes 1/3 of the height */
  width: 100%;
}

/* Responsive layout for smaller screens */
@media (max-width: 768px) {
  #content-wrapper {
    flex-direction: column;
  }

  #photo-container {
    flex: 2;
    height: 66vh; /* 2/3 of the viewport height */
    border: 0.2rem solid #1d1f1e;
  }

  #map {
    flex: 1;
    height: 34vh; /* 1/3 of the viewport height */
  }
}

.media-element {
  max-width: 100%;
  max-height: 100%;
}