body {
    margin:0;
    font-family: Arial, sans-serif;
    background:white;
}


.container {
    width:100%;
    text-align:center;
}


h1 {
    text-align:center;
    font-size:28px;
    margin:20px 0 10px;
    color:#333;
}


.legend {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:25px;
    margin-bottom:15px;
    font-size:15px;
}


.legend div {
    display:flex;
    align-items:center;
}


.box {
    display:inline-block;
    width:18px;
    height:18px;
    border-radius:3px;
    margin-right:6px;
}


.green {
    background:#39a845;
}


.grey {
    background:#cccccc;
}


#map {
    width:100%;
    height:650px;
}


.leaflet-popup-content {
    text-align:center;
}


.leaflet-popup-content button {
    background:#39a845;
    color:white;
    border:none;
    padding:10px 18px;
    border-radius:5px;
    cursor:pointer;
    font-size:14px;
}


.leaflet-popup-content button:hover {
    opacity:0.85;
}


@media(max-width:600px){

    #map {
        height:500px;
    }

    h1 {
        font-size:22px;
    }

}