* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html,
a {
  height: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  overflow: visible;
}

#image-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(20%, 20%)
  ); /* Responsive grid for square images */
  gap: 0; /* No gaps between images */
  width: 100vw; /* Full viewport width */
  height: fit-content; /* Full viewport height */
  margin: 0;
  padding: 0;
}

#image-grid img {
  width: 100%; /* Ensures each image fills the entire grid cell */
  height: auto; /* Maintains the square aspect ratio of the images */
}

.pop {
  position: relative; /* Added to enable z-index */
  z-index: 1; /* Added to lift element */
  -webkit-animation: glow-yellow 6s ease-in-out infinite both;
  animation: glow-yellow 6s ease-in-out infinite both;
}

/* Breakpoint for medium screens (e.g., tablets) */
@media (max-width: 799px) {
  #image-grid {
    grid-template-columns: repeat(auto-fill, minmax(50%, 50%));
  }
}

/* Breakpoint for larger screens (e.g., desktops) */
@media (min-width: 800px) {
  #image-grid {
    grid-template-columns: repeat(auto-fill, minmax(25%, 25%));
  }
}

/* Breakpoint for extra-large screens (e.g., large desktops) */
@media (min-width: 1200px) {
  #image-grid {
    grid-template-columns: repeat(
      auto-fill,
      minmax(20%, 20%)
    ); /* Responsive grid for square images */
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2025-1-22 1:12:27
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation glow-yellow
 * ----------------------------------------
 */
@-webkit-keyframes glow-yellow {
  0%,
  100% {
    -webkit-box-shadow: 0 0 5px rgba(255, 255, 102, 0.3); /* Lighter yellow */
    box-shadow: 0 0 5px rgba(255, 255, 102, 0.3);
  }
  50% {
    -webkit-box-shadow: 0 0 15px 8px rgba(255, 255, 102, 0.9); /* Brighter, wider yellow glow */
    box-shadow: 0 0 15px 8px rgba(255, 255, 102, 0.9);
  }
}
@keyframes glow-yellow {
  0%,
  100% {
    -webkit-box-shadow: 0 0 5px rgba(255, 255, 102, 0.3);
    box-shadow: 0 0 5px rgba(255, 255, 102, 0.3);
  }
  50% {
    -webkit-box-shadow: 0 0 15px 8px rgba(255, 255, 102, 0.9);
    box-shadow: 0 0 15px 8px rgba(255, 255, 102, 0.9);
  }
}