/* =========================

   CUSTOMIZE COLORS & FONTS

   ========================= */


:root {

  --bg-color: #0e0e0e;

  --text-color: #eaeaea;

  --accent-color: #ff5c8a;

  --card-bg: #1a1a1a;

  --font-main: Georgia, serif;

  --font-title: Arial, sans-serif;

}


/* =========================

   BASE STYLES

   ========================= */


* {

  box-sizing: border-box;

}


body {

  margin: 0;

  background-color: var(--bg-color);

  color: var(--text-color);

  font-family: var(--font-main);

  line-height: 1.6;

}


/* =========================

   HEADER

   ========================= */


header {

  text-align: center;

  padding: 3rem 1rem 2rem;

}


header h1 {

  font-family: var(--font-title);

  font-size: 2.5rem;

  margin: 0;

}


header p {

  margin-top: 1rem;

  opacity: 0.85;

}


/* =========================

   NAVIGATION

   ========================= */


nav {

  text-align: center;

  margin-bottom: 2rem;

}


nav a {

  color: var(--accent-color);

  text-decoration: none;

  margin: 0 1rem;

  font-size: 0.9rem;

}


nav a:hover {

  text-decoration: underline;

}


/* =========================

   MAIN / GALLERY

   ========================= */


main {

  max-width: 1200px;

  margin: auto;

  padding: 0 1rem 3rem;

}


.gallery {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

  gap: 1rem;

}


.art-card {

  background-color: var(--card-bg);

  padding: 0.5rem;

  cursor: pointer;

  transition: transform 0.2s ease;

}


.art-card:hover {

  transform: scale(1.02);

}


.art-card img {

  width: 100%;

  height: auto;

  display: block;

}


.caption {

  font-size: 0.85rem;

  margin-top: 0.5rem;

  text-align: center;

  opacity: 0.8;

}


/* =========================

   FOOTER

   ========================= */


footer {

  text-align: center;

  padding: 2rem 1rem;

  font-size: 0.8rem;

  opacity: 0.6;

}


/* =========================

   LIGHTBOX

   ========================= */


.lightbox {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.9);

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 999;

}


.lightbox img {

  max-width: 95%;

  max-height: 90%;

}


.lightbox.active {

  display: flex;

}