/* Keep layers (which are square) always in the center filling page to max */

#layers {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    user-select: none;
}
#layers img, #layers .layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
img {
    /* prevent image flashing blue on mobile when taped if image has map */
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
@media (orientation: portrait) {
    #layers {
        top: min(20px, calc((100vh - 100vw) / 2));
        width: 100vw;
        height: 100vw;
    }
}
@media (orientation: landscape) {
    #layers {
        left: calc((100vw - 100vh) / 2);
        width: 100vh;
        height: 100vh;
    }
}