body {
  color: #333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gap: 1rem;
  margin: var(--gap);
}

img {
  max-width: 100%;
}

.entries {
  display: grid;
  gap: calc(2.5 * var(--gap)) var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(100px, 150px));
  justify-content: center;
}

.entry {
  color: inherit;
  display: inline-grid;
  justify-items: center;
  position: relative;
  text-decoration: none;
}

.entry:active,
.entry:hover {
  text-decoration: underline;
}

.entry:active *,
.entry:hover * {
  border-color: #aaa;
}

.entry:first-child::before,
.entry:last-child::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 1rem;
  opacity: 0.5;
  position: absolute;
  top: -2rem;
  width: 100%;
}

.entry:first-child::before {
  background-image: url(./mostRecent.png);
}
.entry:last-child::before {
  background-image: url(./oldest.png);
}

.thumbnail,
.blankThumbnail {
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}

.blankThumbnail {
  background: white;
  height: 100%;
  position: absolute;
  width: 100%;
}

header,
footer {
  display: flex;
  gap: var(--gap);
  justify-content: center;
}

header {
  border-bottom: 2px solid black;
  margin-bottom: calc(3 * var(--gap));
  padding-bottom: var(--gap);
}

footer {
  /* Delay showing the footer to give page images time to load. */
  animation: fadeIn 5s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.buttonImage {
  height: 1rem;
}

.navigationButton {
  padding: 1rem;
  text-decoration: none;
}

@media (min-width: 768px) {
  body {
    --gap: 3rem;
  }

  header {
    margin-bottom: calc(1.5 * var(--gap));
  }

  .entries {
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(100px, 200px));
  }

  .buttonImage {
    height: 1.5rem;
  }
}