/* body {
    margin: 10px;
    padding: 10px; 
} */

#container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
}

#map {
    width: 99%;
    max-width: max(100%, 300px);
    height: 400px;
    border-radius: 20px;
    background: rgb(240, 245, 255);
    overflow: hidden;
}

#map svg {
    z-index: 2;
}

#country-name {
    font-weight: 900;
}

.country {
    fill: #dadada;
    cursor: pointer;
}

.country:hover {
    fill: #9c9c9c;
    stroke: #ffcd62;
}

.wc, .wc:hover {
    fill: #FF6464;
}

.cc, .cc:hover {
    fill: #91C483;
}

.btn-gc {
    border-radius: 5px;
    padding: 7px;
    text-decoration: none;
    border: none;
    background-color: #b3b3b3;
    color: #474747;
}

.btn-gc:hover {
    background-color: #ffcd62;
    color: #474747;
}

#help-btn:hover {
    background-color: #91C483;
}

.invisible-note {
    display: none;
}

#wrong-country-name {
    font-weight: 900;
    color: #FF6464;
}

.correct-country-name {
    color: #91C483;
}