#legend-container {
    position: absolute;
    bottom: 10px;
    left: 10px;
    aspect-ratio: 840/479 !important;
    max-width: 260px !important;
    max-height:50% !important;
    width:30%;
    min-width: 140px !important;
    z-index: 10;
    
}

#legend {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    
}

#legend-container {
    transition: transform 0.3s ease;  /* Smooth transition */
    transform-origin: bottom left
}

/* When hovering over the container, scale the image with the id 'legend' */
#legend-container:hover {
    transform: scale(1.2); /* Enlarge the image */
}


.light-mode #legend {
    border: 1px solid #cccccccc;
    box-shadow: 2px 2px 2px rgb(121, 121, 121);
}

.dark-mode #legend {
    border: none;
    box-shadow: 3px 3px 2px #131313;
}