body{background:black;color:white;font-family:sans-serif;margin:0;display:flex;flex-direction:column;align-items:center}
.controls-container{display:flex;flex-direction:column;align-items:center;margin:5px 0}
.controls{display:flex;gap:10px;justify-content:center;margin:2px 0;align-items:center}
.controls.row0{margin-bottom:5px;justify-content:center}
button,select{background:black;color:white;border:1px solid white;cursor:pointer;padding:5px 10px}
img{display:block;width:auto;height:auto;max-width:970px;margin:0 auto}
.page-number{color:white;font-size:16px;min-width:40px;text-align:center}
#imageContainer{position:relative;width:100%}
#imageContainer img{opacity:0;transition:opacity .2s ease-in;display:block;margin:0 auto;height:auto;max-width:970px}
#imageContainer img.loaded{opacity:1}
#imageContainer .overlay-left,#imageContainer .overlay-right{position:absolute;top:0;height:100%;width:50%;cursor:pointer}
#imageContainer .overlay-left{left:0}
#imageContainer .overlay-right{right:0}
html{scroll-behavior:smooth}
@media(max-width:768px){
  img{max-width:100%;height:auto}
  .controls-container{flex-direction:column;align-items:center}
  .controls{justify-content:center;flex-wrap:wrap;gap:10px}
  button,select{width:auto;min-width:80px;margin:2px}
  .page-number{min-width:30px;text-align:center}
}
