html, body {

    margin:0;

    padding:0;

    width:100%;

    height:100%;

    overflow:hidden;

    background:black;

}



#viewer {

    width:100vw;

    height:100vh;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}



/* Main image */

#mainImage {

    max-width:100%;

    max-height:100%;

    object-fit:contain;

    position:absolute;

}



/* Overlay image */

#overlayImage {

    max-width:100%;

    max-height:100%;

    object-fit:contain;

    position:absolute;

    opacity:0;

}



/* Category dropdown */

#categorySelect {

    position:absolute;

    top:20px;

    left:20px;

    z-index:20;

    padding:10px;

    font-size:18px;

}



/* Button layer */

#controls {

    position:absolute;

    width:100%;

    height:100%;

    z-index:10;

    pointer-events:none;

}



/* Buttons */

button {

    pointer-events:auto;

    position:absolute;

    padding:15px 25px;

    font-size:20px;

    background:black;

    color:white;

    border:2px solid white;

    opacity:0.7;

    cursor:pointer;

}



button:hover {

    opacity:1;

}



/* Left */

#leftButton {

    left:30px;

    top:50%;

    transform:translateY(-50%);

}



/* Right */

#rightButton {

    right:30px;

    top:50%;

    transform:translateY(-50%);

}



/* Overlay */

#overlayButton {

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

}



/* Fullscreen */

#fullscreenButton {

    bottom:30px;

    right:30px;

}