body {
  margin: 0;
  background: #141414;
  font-family: sans-serif;
}

#header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #141414;
}

#logo {
  color: #ddd;
  text-decoration: none;
  font-weight: bold;
}

#about-open {
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
}

#feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 4px;
  padding: 4px;
  /* Grid stretches its items by default, and an image with no height of its
     own is stretched with them. That distorts the cover, which is the one
     thing a visitor is given to judge by. */
  align-items: start;
}

.cover {
  width: 100%;
  /* The covers arrive at 560 wide and 392 to 420 tall, so a fixed four to
     three loses a few pixels at worst and holds the tile open before the
     image lands. Contain rather than cover, because a cropped cover is a
     different cover. */
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #1a1a1a;
  display: block;
  cursor: pointer;
}

#end {
  text-align: center;
  padding: 48px 0 64px;
}

#end button {
  font-size: 16px;
  padding: 12px 36px;
  border: none;
  border-radius: 999px;
  background: #333;
  color: #ddd;
  cursor: pointer;
}

#modal,
#about {
  position: fixed;
  inset: 0;
  z-index: 2;
}

.backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}

#modal-body {
  position: relative;
  margin: 5vh auto;
  width: min(640px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  background: #1e1e1e;
  border-radius: 8px;
}

#samples img {
  width: 100%;
  display: block;
}

#kudasai {
  position: sticky;
  bottom: 0;
  padding: 16px;
  text-align: center;
  background: linear-gradient(to bottom, transparent, #1e1e1e 60%);
}

#kudasai button {
  font-size: 18px;
  padding: 12px 32px;
  border: none;
  border-radius: 999px;
  background: #e0455a;
  color: #fff;
  cursor: pointer;
}

#about-body {
  position: relative;
  margin: 10vh auto;
  width: min(420px, 88vw);
  max-height: 80vh;
  overflow-y: auto;
  padding: 32px 28px;
  background: #1e1e1e;
  border-radius: 8px;
  color: #ddd;
  text-align: center;
  line-height: 1.9;
}

#about-body button {
  margin-top: 16px;
  font-size: 16px;
  padding: 10px 36px;
  border: none;
  border-radius: 999px;
  background: #e0455a;
  color: #fff;
  cursor: pointer;
}