#map-container{
    margin-top: 40px;
    margin-bottom: 25px;
    display: table;
}

.info {
    padding: 5px;
    font-family: 'Century';
    background: #666666;
    color: white;
    border-radius: 5px;
}

.counties {
    fill-opacity: 1;
    stroke: #ffffff;
    stroke-width: 1;
    fill-rule: evenodd;
}

.county {
    stroke: #000000;
    stroke-width: .48;
}

.county:hover, .county:focus {
    cursor: pointer;
    /* stroke: #5d1542; */
    /* stroke: #f30499;
    stroke-width: 10;
    fill-opacity: 0.7; */
    stroke-width: 4;
    stroke: #5d1542;
    fill: #5d1542;
    fill-opacity: 1;
    outline: none;
}

.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 5px;
}

.map {
    width: 600px;
    max-width: 100%;
    grid-area: map;
}

#svgmap {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
            "text"
            "map"
            "legend";
    border: 1px solid #666666; 
    border-radius: 16px;   
    background-color: rgb(255, 252, 244); 
    text-align: center;
}

.legend {
    margin-top: auto;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    grid-area: legend;
}
.info-text {
    text-align: left;
    grid-area: text;
    margin-left: 1rem;
    margin-top: 1rem;
    margin-right: 1rem;
    margin-bottom: auto;
    min-height: 125px;
}


@media (min-width: 992px) {
    #svgmap {
    display: grid;
    grid-template-columns: auto 75% 200px;    
    grid-template-rows: auto 500px;
    grid-template-areas: 
            "text text ."
            ". map legend";
    border: 1px solid #666666; 
    border-radius: 16px;   
    background-color: rgb(255, 252, 244); 
    }
    .legend {
        margin-top: auto;
        margin-right: 1rem;
        margin-bottom: 1rem;
        max-width:fit-content;
        grid-area: legend;
    }
    .info-text {
    text-align: left;
    grid-area: text;
    margin-left: 1rem;
    margin-top: 1rem;
    margin-right: auto;
    margin-bottom: auto;
    min-height: 125px;
    }
}
