/*First section regards dealing with the gallery filter*/

/* hashtag is the filter label ID */
body:has(#blender:checked) .gallery-item:not(.blender), /*Ignore this error??? It may be an outdated editor*/
body:has(#drawing:checked) .gallery-item:not(.drawing),
body:has(#aseprite:checked) .gallery-item:not(.aseprite),
body:has(#misc:checked) .gallery-item:not(.misc) {
  display: none;
}



body {
  color: black;
  background: #6b4133; /*header background color*/
  margin: 0 auto;
}

img {
  display: block;
  max-width: 300px;  /*caps max image width*/
  max-height: 300px; /*caps max image height*/
  width: 100%;       /* Ensures image scales fluidly up to max-width */
  height: auto;
}

.nav-wrapper {
  display: grid;
  grid-template-columns: 240px auto; /*Does NOT determine column width*/
  position: relative;
}

header {
  color: #FFFBE9;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 20px 30px 20px 20px;
  border: 4px solid #6b4133;
  margin-left: 5px;
}

h2 {   /*literally only used for year number sections right now*/
  color: #FFFBE9; 
}

main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.25rem;
  background-color: #E3CAA5;
}

.year-section h2 {
  padding: 10px 20px;
  color: white;
  margin: 0 0 1rem 0;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /*controls column width*/
  gap: 1.5rem;
  align-items: center; /* Determines how each figure is positioned in its place relative to the rest of the row/column */
}

figure {
  background-color: #FFFBE9;
  border: 2px solid #6b4133;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  width: fit-content;
  margin: 0 auto;
}

figcaption {
  text-align: center;
  margin-top: 20px; /* Space between image and caption */
}

h2 {
  padding: 20px;
  background-color: #6b4133;
}