body {
    overflow: hidden;
    /* fix for the right border image overflowing from the web. It could b easily solved by cropping the original image, but this is easier */
}

#map-surface,
#map-surface-tunnels,
#map-caves-tunnels,
#map-volcano-tunnels {
    height: calc(100vh - 20px);
    left: 0;
    top: 0;
}

#top-frame,
#bottom-frame,
#left-frame,
#right-frame {
    position: absolute;
    pointer-events: none;

}

#top-frame {
    top: 0;
    left: 0;
    z-index: 798;
    background-image: url('./WorldMap_HorizontalFrame_Top.png');
    background-repeat: repeat-x;
    background-position: center top;
    width: 100%;
    height: 2.3em;
}

#bottom-frame {
    bottom: 0;
    left: 0;
    z-index: 798;
    background-image: url('./WorldMap_HorizontalFrame_Bottom.png');
    background-repeat: repeat-x;
    background-position: center top;
    height: 2.3em;
    width: 100%;
}

#left-frame {
    top: 0;
    left: -20px;
    height: 100%;
    z-index: 799;
}

#right-frame {
    top: 0;
    right: -20px;
    height: 100%;
    z-index: 799;
}

.layerButton {
    padding: 5px;
    width: 11ch;
    color: #eeb98b;
    text-align: center;
    text-shadow: 0px 2px 1px #591515;

    background: url('./fg4_buttonMid_Up.png');
    background-repeat: no-repeat;
    border: none;
    background-size: cover;
}

.layerButton:hover {
    background: url('./fg4_buttonMid_Over.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.layerButton:active {
    background: url('./fg4_buttonMid_Down.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.layerButtons {
    position: absolute;
    z-index: 1100;
    left: 60px;
}
/* probably do some @media stuff with .layerButtons to make the layer buttons apear larger on mobile */

.leaflet-control-zoom a {
    background-image: url('./fg4_buttonMid_Up_square.png');
    background-size: cover;
    color: #eeb98b !important;
    background-color: transparent !important;
    border-bottom: none;
}

.leaflet-control-zoom a:hover {
    background-image: url('./fg4_buttonMid_Over_square.png');
}


.leaflet-control-zoom a:active {
    background-image: url('./fg4_buttonMid_Down_square.png');
}