html, body, #map {
    height: 100%;
    margin: 0
}

#map {
    position: absolute;
    inset: 0;
    cursor: grab
}

.marker img, .marker svg {
    width: 32px;
    height: 32px;
    transition: transform .2s
}

.marker:hover img, .marker:hover svg {
    transform: scale(1.15)
}

#layer-panel .tgl {
    appearance: none;
    width: 0;
    height: 0
}

    #layer-panel .tgl + span > span:first-child {
        background: #334155
    }

    #layer-panel .tgl:checked + span > span:first-child {
        background: #10b981
    }

    #layer-panel .tgl:checked + span > span:last-child {
        transform: translateX(1.25rem)
    }

.leaflet-tooltip {
    background: rgba(23,23,23,.85);
    border-radius: .5rem;
    color: #fff;
    padding: .25rem .6rem;
    font-size: .75rem
}

@keyframes scale {
    0% {
        transform: scale(.8);
        opacity: 0
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.animate-scale {
    animation: scale .15s ease-out
}