body {
  padding:15px 30px;
}

.gallery {
  display:block;
  text-align:center;
}

.gallery.columns {
  gap:1.5vh;
  columns:5;
}

.gallery img {
  display:block;
  transition:0.3s;
  border-radius:1vh;
  margin:0 auto .8vh auto;
  background-color:#000000;
  max-width:min(40vh, 100%);
}

.gallery img:hover {
  opacity:0.5;
  cursor:pointer;
  transition:0.2s;
}

figure {
  margin:0;
  padding-bottom:1vh;
  break-inside:avoid;
}

.cyberpunk {
  border:3px solid #bf54e2;
}

.steampunk {
  border:3px solid #bb6726;
}

.wither {
  border:3px solid #a86b8b;
}

.bloom {
  border:3px solid #98a54e;
}

.vampire {
  border:3px solid #e6466c;
}

.werewolves {
  border:3px solid #6291ad;
}

.seafoam {
  border:3px solid #51b083;
}

.fossils {
  border:3px solid #ba8c25;
}

.crystals {
  border:3px solid #d35e88;
}

.tragedy {
  border:3px solid #3e8e8b;
}

.mystery {
  border:3px solid #e0434a;
}

.comedy {
  border:3px solid #ff8040;
}

#cyberpunk {
  color:#bf54e2;
}

#steampunk {
  color:#bb6726;
}

#wither {
  color:#a86b8b;
}

#bloom {
  color:#98a54e;
}

#vampire {
  color:#e6466c;
}

#werewolves {
  color:#6291ad;
}

#seafoam {
  color:#51b083;
}

#fossils {
  color:#ba8c25;
}

#crystals {
  color:#d35e88;
}

#tragedy {
  color:#3e8e8b;
}

#mystery {
  color:#e0434a;
}

#comedy {
  color:#ff8040;
}