/* 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 {

}

.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;
}

.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----------------------------- */
.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;
}



/* 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%;
}

.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;
}