#map-container {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding-inline: 1rem;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: justify;
    margin-block-end: 2rem;
}

#map-container #region-map {
    text-align: center;
    width: clamp(360px, 90vw, 600px);
}

#map-container #region-description {
    width: clamp(360px, 80vw, 500px);
}

#map-container {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding-inline: 1rem;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: justify;
    margin-block-end: 2rem;

    & #region-map {
        text-align: center;
        width: clamp(360px, 90vw, 600px);
    }

    & #region-description {
        width: clamp(360px, 80vw, 500px);
    }
}

g.country-bloob>g {
    position: relative;
    pointer-events: bounding-box;
    cursor: pointer;
    fill: #f6f9e8;
    transition: all 0.3s ease;
}

g.country-bloob>g:hover {
    fill: #3d7dcb;
}

g.city-names>path,
g.country-names-position>circle,
g.country-bloob>g>path,
span.country-blob-viewer {
    pointer-events: none;
}

span.country-blob-viewer {
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    padding: 4px;
    background: #f6f9e8;
    border: 2px solid #B9B7AE;
    color: #51504C;
    font-size: 15px;
    box-shadow: 2px 0px 10px rgba(23, 23, 23, 0.1);
}