body {
  background-color: black;
  color: white;
  font-family: Comic Sans MS;
  
}
.spoiler{
  background-color: gray;
  color: transparent;
  user-select: none;
}

.spoiler:hover{
  background-color: inherit;
  color: inherit;
}
 /* unvisited link */
a:link {
  color: #f6ff00;
}

/* visited link */
a:visited {
  color: #dbe300;
}

/* mouse over link */
a:hover {
  color: #dbe300;
}

/* selected link */
a:active {
  color: #f6ff00;
} 

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* space between items */
  padding: 6px;
  justify-content: center; /* centers the row if fewer than full count */
}

.responsive {
  flex: 0 0 calc(25% - 12px); /* exactly 4 per row on desktop */
}

@media only screen and (max-width: 700px) {
  .responsive {
    flex: 0 0 calc(50% - 12px); /* 2 per row */
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    flex: 0 0 100%; /* 1 per row */
  }
}

.gallery {
  border: 1px solid #ccc;
}

.gallery:hover {
  border: 1px solid #777;
}

.gallery img {
  width: 100%;
  height: 200px;        /* fixed uniform height */
  object-fit: scale-down;
  display: block;
}

.desc {
  padding: 15px;
  text-align: center;
}