html, body {                                                                                                                                                                       
      width: 100%;                                                                                                                                                                   
      height: 100%;                                                                                                                                                                  
      margin: 0;  
      padding: 0;
      overflow: hidden;
      position: relative;
  }

.map-navbar {
  position: absolute;
  top: 1rem;
  left: 50%;                                                                                                                                                                         
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  padding: 0.7rem 0.95rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#searchBar {
    width: 300px;
    max-width: 100%;
}

#countrySelect {
    width: 200px;
    max-width: 100%;
}

#map {
    position: absolute;
    top: calc(70px + 1rem);
    bottom: 20px;
    left: 20px;
    right: 20px;
    border: solid 2px black;
    border-radius: 10px;
}

#attributions {
    font-size:0.7rem;
    z-index:1000
}

@media (max-width: 705px) {                                                                                                                                                        
    #map {      
        bottom: 40px;                                                                                                                                                              
    }           
}

@media (max-width: 576px) {
    .map-navbar {
        border-radius: 12px;
        left: 1rem;
        right: 1rem;
        width: auto;
        transform: none;
    }

    #searchBar {
        min-width: 0;
    }

    #countrySelect {
        min-width: 0;
    }
}

@media (max-width: 390px) {                                                                                                                                                        
    #map {      
        bottom: 60px;                                                                                                                                                              
    }           
}

@media (max-width: 260px) {                                                                                                                                                        
    #map {      
        bottom: 80px;                                                                                                                                                              
    }           
}

@media (max-width: 230px) {                                                                                                                                                        
    #map {      
        bottom: 100px;                                                                                                                                                              
    }           
}