/* NOTE: This css is for styling art galleries */

/* inspo from https://blog.logrocket.com/how-create-responsive-image-gallery-css-flexbox/ godspeed may you get extra fries with every meal */

/* NOTE: Thumbnail images: go to
    https://bulkresizephotos.com/en?quality=0.44&type=absolute&value=550
Make sure thumbnails are 550px on their longest side @ 44% quality, JPG */


/* Temporary container control on older gallery pages */
.container {
      max-width: 1000px;
      margin: auto;
}



/* TOP OF GALLERY STUFF ----------------------------- */
.galleryTitleText {
    
    display: flex;
    flex-direction: column;
}

.galleryTitleText h1 {
      
}

.galleryNavbar {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      margin: 20px 25px;
      margin-top: 25px;
      margin-bottom: 30px;
}

@media only screen and (max-width: 675px) {
  .galleryNavbar {
      align-items: flex-start;
      flex-direction: column;
    }
  }

.galleryLinks {
      display: flex;
      list-style-type: none;
      justify-content: flex-end;
}

.galleryLinks button {
      margin: 0px;
      color: var(--accent-mid-color);
      background: var(--darkest-color);
}

.galleryLinks li {
      font-family: 'Grenze', serif;
      margin: 3px 0.5em;
}



/* CW GUIDE LINK ----------------------------- */
.cwLink {
      display: flex;
      justify-content: center;

      color: var(--warning-color);


      width: 100%;
      margin-bottom: 20px;
}

.cwLink a:link {
      color: var(--warning-color);
      text-decoration: none;
      transition: 0.2s;
}

.cwLink a:visited {
      color: var(--warning-color);
      text-decoration: none;
      transition: 0.2s;
}

.cwLink a:hover {
      color: var(--lightest-color);
      text-decoration: none;
      transition: 0.2s;
}

.cwLink a:active {
      color: var(--warning-glow-color);
      text-decoration: none;
      transition: 0.2s;
}



/* SECTION TITLES----------------------------- */

/*This is for /gallery.php, the page that links to all the other galleries.*/
.galleryPage {
      /*Fade-in on load animation for content on pages. */
      animation: fadeInAnimation ease 3s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
    }

    /*Related to fade-in on load animation for content on pages. */
@keyframes fadeInAnimation {
      0% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }

/*And this is for the year-specific gallery pages IE: ../gallery/archive/2024/index.php */
.galleryPageSelected {
      margin: 0px 0px;

      /*Fade-in on load animation for content on pages. */
      animation: fadeInAnimation ease 3s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
    }

    /*Related to fade-in on load animation for content on pages. */
@keyframes fadeInAnimation {
      0% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }

.galleryPageSelected .galleryTitleText {
  margin: 0px 0px;
}

.galleryPage .galleryTitleText {
  margin: 25px 30px;
}

/* Actual gallery itself */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    padding-left: 25px;
    padding-right: 25px;
    margin-bottom: 40px;
    list-style-type: none;
}

/* this is just for the homepage */
.galleryIndex {
    gap: 10px;
    width: 100%;
}

.galleryIndex > li {
      height: 100px;

}

/* .galleryIndex::after {
      content:'';
      flex-grow: 999;
} */



/* start of all the other general galleries */
.gallery > li {
      flex: 1 1 auto;

      cursor: pointer;
      height: 250px;
      position: relative;

      margin-bottom: 20px;

}

.galleryIndex > li {
    margin: 0;

}

/* NOTE: If you wanna disable how images fill up the bottom row, activate the thing below Just be away it might break a bunch of shit lol*/

/*
.gallery::after {
      content:'';
      flex-grow: 999;
} */

.gallery li img {

      object-fit: cover;
      width: 100%;
      height: 100%;
      vertical-align: middle;

      border-radius: 2px;
      box-shadow: 1px 1px 8px var(--shadow-color);
      transition: 0.3s;
}

.gallery li img:hover {
      border-radius: 7px;
      box-shadow: 0px 0px 8px var(--glow-color);
}

.gallery li img:active {
      filter: contrast(110%);

      /*box-shadow: 0px 0px 10px rgba(255, 255, 255,0.9);*/
}

.gallery li p {
      margin: 5px 2px;
}