body { margin:0; font-family: sans-serif; }
.navbar { position: sticky; top:0; background:#333; color:#fff; padding:10px; z-index:1000; }
.navbar ul { margin:0; padding:0; display:flex; list-style:none; }
.navbar li { margin-right:20px; }
.navbar a { color:#fff; text-decoration:none; }
.gallery-container, .slideshow-container { max-width:900px; margin:20px auto; }
.scrollbox { display:flex; overflow-x: auto; padding:10px; border:1px solid #ccc; }
.scrollbox img { height:150px; margin-right:10px; cursor:pointer; transition: transform .2s; }
.scrollbox img:hover { transform: scale(1.05); }
.popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; z-index:1001; }
.popup-overlay img { max-width:90%; max-height:80%; }
.popup-overlay .close-btn { position:absolute; top:20px; right:20px; background:#fff; padding:5px 10px; cursor:pointer; }
.slideshow-container { position: relative; }
.slideshow-container img { width:100%; height:auto; display:block; }
.slide-btn, .gallery-btn, .random-btn {
  position:absolute; top:50%; transform: translateY(-50%);
  background:rgba(0,0,0,0.5); color:#fff; border:none; padding:10px; cursor:pointer;
}
#prev { left:10px; }
#next { right:10px; }
#viewGallery { left:50%; transform: translate(-50%,-50%); top:90%; }
#randomSlide { right:10px; top:90%; }