* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, #ff00cc, transparent 40%),
    radial-gradient(circle at bottom right, #00f2ff, transparent 40%),
    linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  color: white;
}

/* TITLE */
.title {
  text-align: center;
  margin: 30px 0;
  font-size: 3rem;
  background: linear-gradient(90deg, #00f2ff, #ff00cc, #00f2ff);
  background-size: 300%;
  background-clip: text;            
-webkit-background-clip: text;   
color: transparent;               
-webkit-text-fill-color: transparent;
animation: glowText 6s infinite linear;

}

@keyframes glowText {
  from { background-position: 0%; }
  to { background-position: 300%; }
}

/* FILTER BUTTONS */
.filters {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
}

.filters button {
  padding: 10px 25px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.15);
  color: white;
  transition: 0.4s;
}

.filters button.active,
.filters button:hover {
  background: linear-gradient(135deg, #ff00cc, #00f2ff);
  color: black;
}

/* GALLERY */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  padding: 40px;
}

.gallery img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.gallery img:hover {
  transform: scale(1.15);
  box-shadow:
    0 0 30px rgba(255,0,204,0.7),
    0 0 60px rgba(0,242,255,0.6);
}

/* LIGHTBOX */
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10,10,25,0.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.lightbox-box {
  position: relative;
  max-width: 90%;
  animation: zoom 0.4s ease;
}

@keyframes zoom {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

#lightbox img {
  width: 100%;
  border-radius: 25px;
}

/* NAV */
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 35px;
  padding: 12px;
  cursor: pointer;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
}

.prev { left: -60px; }
.next { right: -60px; }

/* RESPONSIVE */
@media (max-width: 768px) {
  .gallery img {
    width: 90%;
    height: auto;
  }
}
@media (max-width: 480px) {
  .filters {
    flex-direction: column;
    align-items: center;
  }

  .filters button {
    width: 80%;
    margin-bottom: 10px;
  }

  .nav.prev { left: -40px; }
  .nav.next { right: -40px; }
}