*{margin:0;padding:0;box-sizing:border-box} /* reset all elements and use consistent box sizing */
body{background:#111;color:#eee;font-family:Arial,sans-serif} /* dark page background, light text, and base font */
.topbar{padding:1rem 2rem;display:flex;gap:1rem;align-items:center} /* header bar layout with spacing */
.topbar a{color:#c69c6d;text-decoration:none} /* style the back link in the top bar */
.filters{text-align:center;padding:1rem} /* center the filter buttons and add padding */
.filter{padding:.6rem 1rem;margin:.2rem;cursor:pointer;border-radius:999px;border:1px solid transparent;transition: background 160ms ease, color 160ms ease, transform 160ms ease} /* pill-shaped filter buttons */
.filter.active{background:#c69c6d;color:#111;transform:translateY(-2px)} /* active state for selected filters */
.filter:hover, .filter:focus { background:#c69c6d; color:#111; transform: translateY(-2px); }
.gallery{column-count:3;column-gap:1rem;padding:1rem} /* create a column-based masonry gallery layout */
.item{break-inside:avoid;margin-bottom:1rem} /* prevent items from breaking between columns */
.item img{width:100%;display:block;cursor:pointer;transition:transform 180ms ease,box-shadow 180ms ease} /* responsive gallery images with smooth hover */
.item img:hover{transform:scale(1.03);box-shadow:0 10px 30px rgba(0,0,0,0.6)}
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.95);justify-content:center;align-items:center} /* hidden overlay that covers the full screen */
.lightbox img{max-width:90%;max-height:90%} /* constrain lightbox image size inside the overlay */
#close{position:absolute;top:20px;right:30px;font-size:3rem;cursor:pointer} /* style the lightbox close button and position it */
@media(max-width:900px){.gallery{column-count:2}} /* reduce columns on medium screens */
@media(max-width:600px){.gallery{column-count:1}} /* use a single column on small screens */