/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* styles.css */

body {
  font-family: Verdana;
  margin: 0;
  padding: 40px;
  background-color: #e882b2;
}

h1 {
  margin: 20px 0;
  color: #000000;
}

.gallery a {
  position: relative;      /* Needed for the overlay */
  display: inline-block;
  overflow: hidden;        /* Keep overlay within image bounds */
  border-radius: 8px;
  border-color: black;
}

.gallery img {
  width: 400px;
  height: 400px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05);
}

.post {
  position: relative; 
  width: 90%;     
  margin: auto;
  justify-content: center;   /* horizontal centering */
  align-items: center;   
}



/* Overlay title */
.post-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* semi-transparent black */
  color: #fff;
  display: flex;             /* center text */
  justify-content: center;   /* horizontal centering */
  align-items: center;       /* vertical centering */
  font-size: 1.5rem;
  opacity: 0;                /* hidden by default */
  transition: opacity 0.3s ease;
  text-align: center;
  padding: 10px;
}

.gallery a:hover .post-title {
  opacity: 1;  /* show the title on hover */
}

/* Lightbox styles */
.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 400px;
  height: auto;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
}

.lightbox-content {
  margin: auto;
  display: block;
  width: 400px;
}

.close {
  position: absolute;
  top: 30px;
  right: 50px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

/* Sidebar styling */
.sidebar {
  width: 250px;
  background-color: #f8c1d1; /* light pink to match your site */
  padding: 20px;
  height: 100vh;          /* full height */
  overflow-y: auto;       /* scroll if too long */
  position: fixed;        /* stays on left */
  top: 0;
  left: 0;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.sidebar h2 {
  margin-top: 0;
  text-align: center;
}

.sidebar .menu,
.sidebar .submenu {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.sidebar .menu li {
  margin: 5px 0;
}

.sidebar a,
.sidebar .dropdown-btn {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.sidebar a:hover,
.sidebar .dropdown-btn:hover {
  background-color: #e882b2; /* hover highlight */
  color: #fff;
}

.submenu {
  display: none; /* hidden by default */
  padding-left: 15px;
}

.submenu li a {
  font-size: 0.95rem;
}

main {
  margin-left: 270px; /* slightly more than sidebar width */
  padding: 20px;
  border-radius: 10px;
  border-color: blue;
}

#menu-btn {
  display: none;         /* hidden by default */
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1100;
  background-color: #e882b2;
  border: none;
  color: white;
  font-size: 20px;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    background-color: #f8c1d1;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    transform: translateX(-100%);  /* hidden fully to the left */
    transition: transform 0.3s ease;
    z-index: 1000;
  }
  
    #menu-btn {
    display: block;
  }
  
  .sidebar.active {
    transform: translateX(0);  /* fully visible */
  }

  main {
    margin-left: 0;
    padding: 10px;
  }

  .gallery img {
    width: 100%;
    max-width: 400px;
  }
}
  #overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  z-index: 900;
  transition: opacity 0.3s ease;
}

  #overlay.active {
  display: block;
}