:root {
  --column-gap: 12px;
}

body {
  background-image: url("/assets/gallery/annoyed-angel-tiled-background.png");
  background-repeat: repeat-x;
}

a {
  color: white;
  font-size: 2em;
}

a:visited {
  color: white;
}

a:hover {
  text-decoration: none;
}

.gallery {
  line-height: 0;
  -webkit-column-count: 4;
  /* split it into 5 columns */
  -webkit-column-gap: var(--column-gap);
  /* give it a 5px gap between columns */
  -moz-column-count: 4;
  -moz-column-gap: var(--column-gap);
  column-count: 4;
  column-gap: var(--column-gap);
}

.gallery img {
  width: 100% !important;
  height: auto !important;
  margin-bottom: 5px;
  /* to match column gap */
  border: 1px solid white;

  cursor: zoom-in;

  content-visibility: auto;
}

@media (max-width: 800px) {
  .gallery {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 400px) {
  .gallery {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}