index.css

* {
    margin: 0;
    padding: 0;
}

body{
    background-color: black;
}

area:hover{
    cursor: pointer;
}

#mapaContent{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    z-index: -1;
}

#mapaContent::-webkit-scrollbar {
    display: none;
}

#mapaContent>img {
    cursor: all-scroll;
}

#botaoZoomMais, #botaoZoomMenos, #botaoMudarMapa{
    position: fixed;
    top: 95%;
    width: 30px;
    height: 30px;
    border-radius: 25px;
    right: 75%;
    font-size: 25px;
    cursor: pointer;
}

#botaoZoomMais{
    right: 72%;
}

#botaoMudarMapa{
    right: 65%;
    width: 60px;
    height: 30px;
    font-size: 22px;
}

#divLateral {
    position: fixed;
    width: 270px;
    height: 80%;
    margin-top: 5%;
    background-color: #fff;
    left: -270px;
}

p{
    word-break: break-all;  
}

#divlateral > div > p{
    opacity: 0;
}

.mapBTN:hover{
    cursor: pointer;
}

.notmapBTN:hover{
    cursor: all-scroll;
    z-index: 2;
}

.puxarNormal{
    animation: puxar 1s;
}

.puxarInvertido{
    animation: puxar 1s reverse;
}

.fixar{
    left: 60px !important;
    opacity: 1 !important;
}

.mostrarContent>{
    opacity: 1;
}

.animarContent>*{
    animation: mostrar 1s;
}

@keyframes puxar {
    from{
        left: -270px;
    }to{
        left: 60px;
    }
}