#legend {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 260px;
    height: 148px;
    z-index: 100;
    border-radius: 10px;
    border-color: black;
    border: 1px solid grey;
    box-shadow: 2px 2px 2px lightblue;
}

/* Media query for smaller screens (adjust max-width and font size as needed) */
@media screen and (min-width: 950px) and (max-width: 2000px) {
    #legend {
        position: absolute;
        bottom: 10px;
        left: 10px;
        width: 260px;
        height: 148px;
        z-index: 100;
        border-radius: 10px;
        border-color: black;
        border: 1px solid grey;
        box-shadow: 2px 2px 2px lightblue;

        /* Adjust font size for smaller screens */
    }
}

/* Media query for smaller screens (adjust max-width and font size as needed) */
@media screen and (min-width: 0px) and (max-width: 950px) {
    #legend {
        position: absolute;
        bottom: 10px;
        left: 10px;
        width: 120px;
        height: 68px;
        z-index: 100;
        border-radius: 10px;
        border-color: black;
        border: 1px solid grey;
        box-shadow: 2px 2px 2px lightblue;

        /* Adjust font size for smaller screens */
    }
}