body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}                

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

#info {
    position: absolute;
    top: 0;
    right: 0;
    margin: 10px 10px auto auto;    /* top right bottom left */
    padding: 5px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 12px;
    text-align: center;
    color: #222;
    background: #fff;
}

img {
    width: 300px;          /* Maximum width of the image */
    max-width: 100%;       /* Ensures the image is never wider than its container */
    height: auto; 
}

.mapboxgl-popup {
    max-width: 300px !important; 
}

#architectFilter {
    position: absolute;    /* Allows precise positioning over the map */
    bottom: 10px;          /* Distance from the bottom of the viewport */
    left: 10px;            /* Distance from the left of the viewport */
    z-index: 10;           /* Ensures it is layered above the map */
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: whitesmoke;
    width: 200px;          /* Set a specific width if needed */
}

.mapboxgl-popup-content {
    border-radius: 12px; /* Adjust this value to increase or decrease the roundness */
    box-shadow: 0 3px 14px rgba(0,0,0,0.4); /* Optional: adds shadow for better visibility */
    background-color: #FAF9F6; /* Change the background color */
    color: #333; /* Change the text color */
    font-family: Arial, sans-serif; /* Change the font */
    padding: 10px 20px; /* Adjust padding inside the popup */
    border: 1px solid #ccc; /* Add or change the border */
    width: 300px; /* Fixed width */
    max-width: 300px; /* Ensures that the popup does not grow wider than 300px */
    min-height: 50px; /* Minimum height, adjust as needed */
    overflow-wrap: break-word; /* Ensures text wraps and does not overflow */
    overflow-y: auto; /* Adds a scrollbar if the content exceeds the popup height */
    max-height: 400px; /* Maximum height before scrollbar appears */
}