html, body {
    margin:0;
}

/* html, body, a, button, img {
  cursor: url('img/persimmon.png') 0 0, auto;
} */

.map {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.map img {
    width:100%;
    height:100%;
    position: absolute;
    top: 50%;
    left: 50%;
    object-fit: cover;
    transform: translate(-50%,-50%);
    display:block;

}

/* hotspot styling */
.map-point {
    position:absolute;
    width:7px;
    height:7px;
    background-color:red;
    border-radius:50%;
    transform: translate(-50%, -50%); /* center on coordinate */
    z-index: 1;
}

.map-point:hover {
    background-color:yellow;
}