body {
    /* background-color: darkcyan; */
    color: rgb(43, 39, 39);
    max-height: 100vh;
}

a {
    color: rgb(43, 39, 39);
}
a:visited {
    color: rgb(43, 39, 39);
}

.poi {
    color: rgb(187, 58, 58);
}

.poi--around {
    color: rgb(255, 208, 0);
}

.poi--viewed {
    color: rgb(33, 155, 84);
    text-decoration: line-through;
}

.around-distance-field {
    width: 3rem;
}

.map {
    width: 15rem;
    height: 15rem;
    background-color: rgb(77, 39, 94);
    /* background-image: url('./carte5.png');
    border: 1px solid red;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover; */
    position: relative;
    margin: auto;
}

.point,
.user-point {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: deeppink;
    position: absolute;
    top: 0;
    left: 0;
}

.point {
    background-color: chartreuse;
}

.popup {
    display: grid;
    place-items: center;
    position: absolute;
    top: 0;
    left: 0;
    background-color:rgba(51, 51, 51, 0.8);
    width: 100vw;
    height: 100vh;
    padding: 0.5rem;
    box-sizing: border-box;
}

.popup__content {
    background-color: white;
    padding: 1rem;
    border-radius: 5px;
}

.poi-title {
    text-align: center;
}

.poi-image {
    max-width: 100%;
    box-shadow: 2px 2px 5px gray;
}

.hidden {
    display: none;
}