/* DESKTOP */
#map svg {
    width: 100%;
    height: 720px;
    background: #f8f9fa;
}

/* MOBILE OPTIMIZATION */
@media(max-width:768px) {

    #map svg {
        height: 88vh; /* almost full screen height */
    }

    .container {
        padding-left: 6px;
        padding-right: 6px;
    }

    text {
        font-size: 13px; /* readable labels */
        stroke-width: 4px;
    }

    /* stack legend under map */
    .legend-card {
        margin-top: 12px;
    }
}

/* district styling */
.district {
    stroke: #fff;
    stroke-width: .6;
    cursor: pointer
}

    .district:hover {
        stroke: #000;
        stroke-width: 2.0
    }

/* labels */
text {
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
    fill: #111;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 3px;
}

/* legend */
.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px
}

.legend-color {
    width: 22px;
    height: 22px;
    margin-right: 10px;
    border: 1px solid #999
}