body {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Mapbox code from European Startups */
#map {
  width: 80%;
  height: 400px; /* or you can use percentages, like 60vh */
  margin:auto;
}


.frontpageH2{
  color:blue;
  padding-bottom:10px;

} 

h2{
  font-size:1.2em;
  color:blue;
} 

h3{
  color:white;
  font-weight: 400;
  margin-top: 2px;
  margin-bottom: 2px;
}

a{
  text-decoration: none !important;
}

.airlineFilter{
  width: 80%;
  margin:auto;
  text-align:center;
}

.airline {
  border-style: solid;
  border-width: 5px;
  border-color: black;
  border-radius: 5px;
  width: 130px; /* Fixed width */
  height: 70px; /* Fixed height */
  object-fit: contain;
  box-sizing: border-box; /* Include the border in the width and height */
}

.image-container {
  position: relative;
  display: inline-block; /* Adjust the display as needed for your layout */
  width: 130px; /* Same width as the .airline class for consistency */
  font-size: 0; /* This removes any extra space that inline-block might generate */
  box-sizing: border-box; /* Include the border in the width and height */
}

.overlay-text {
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Centers the text exactly */
  width: 80%; /* Now this is 80% of the container's width */
  color: white; /* Text color */
  font-size: 12px; /* Adjust as necessary, consider dynamic sizing for longer text */
  font-weight: bold; /* Makes the text bold */
  text-align: center; /* Ensures text is centered horizontally */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  margin: 0; /* Ensuring no additional margin */
  padding: 0 10%; /* Add padding to prevent text from touching the borders */
}

#tooltip{
  display: none; 
  position: absolute; 
  padding: 10px; 
  background: blue; 
  border-radius: 10px; 
  font-size: 14px; 
  text-align: center; 
  pointer-events: none; 
  z-index: 10;
}

.location-banner-pic{
  /* height: 40px; */
  /* width: auto; */
  width: 100%;    /* Makes the image take the full width of its container */
  max-height: 180px; /* Sets the maximum height of the image */
  object-fit: cover; /* Ensures the image covers the full container without distortion */
  display: block; /* Removes any default margin or padding */
  border-style:solid;
  border-color:black;
  border-radius: 10px;
  border-width:1px;
}

.city-page-body{
  margin-left: 20%;
  margin-right: 20%;
  position:relative;
  background-color: #FFE6E6;
}

/* mobile only */
@media screen and (max-width: 768px) {
  .city-page-body{
    margin-left:5%;
    margin-right: 5%;
    position:relative;
    background-color: #FFE6E6;
  }

  #map {
    width: 95%;
    height: 400px; /* or you can use percentages, like 60vh */
    margin:auto;
  }

  .airlineFilter{
    width: 95%;
    margin:auto;
  }

  .image-container{
    /* height: 40px;
    overflow:hidden; */
    width: 100px;
  }

  .airline{
    width:100px;
  }

  .overlay-text{
    font-size:10px;
  }
}

.location-banner {
  position: relative;
  width: 100%; /* Adjust based on your layout */
  max-height: 180px; /* Match your image's max height */
  border-radius: 10px; /* Match your image's border-radius */
  overflow: hidden; /* Ensures nothing spills outside the container's rounded corners */
}

#closeButton {
  position: absolute; /* Fix position relative to the viewport */
  top: 10px;       /* Distance from the top */
  right: 10px;     /* Distance from the right */
  border: none;    /* Optional: removes the border */
  background-color: white; /* Optional: makes the background transparent */
  font-size: 24px; /* Adjusts the size of the 'X' */
  cursor: pointer; /* Changes cursor to pointer on hover */
  border-color:black;
  border-style:solid;
  border-radius:10%;
}

.photographer-name {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
  color: gray; /* Text color */
  font-size: 12px; /* Small font size */
  padding: 2px 5px; /* Padding around the text */
  margin: 4px; /* Margin from the bottom right corner */
  border-radius: 5px; /* Optional: rounded corners for the text background */
}

.returnButton{
  padding-top:10px;
}