body{
    --button-size: 7vh;
    --padding-size: 10px;
}
body{
    overscroll-behavior-y: none;
}
#map-panel{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
#buttons{
    height: calc(var(--button-size) + (2 * var(--padding-size)));
    padding: var(--padding-size);
}
#buttons > button{
    height: var(--button-size);
    width: var(--button-size);
    font-size: calc(var(--button-size) * 0.75);
    line-height: calc(var(--button-size) * 0.5);
    padding: 0;
    margin-right: var(--padding-size);
}
#map{
    position: relative;
}
#map > #map-target{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-image: url("../../Vendor/fontawesome/svgs/solid/bullseye.svg");
    background-size: 50px;
    opacity: 0;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    transition-duration: 0.4s;
}
#map.scroll-mode.scrolling > #map-target{
    opacity: 0.7;
}