* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #f1e9da;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='48' viewBox='0 0 60 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='fancy-rectangles' fill='%236a8e7f' fill-opacity='0.4'%3E%3Cpath d='M6 12h6v12H6V12zm12 0h6v12h-6V12zm6-12h6v12h-6V0zM12 0h6v12h-6V0zm0 24h6v12h-6V24zM0 0h6v12H0V0zm6 36h6v12H6V36zm12 0h6v12h-6V36zm12-12h6v12h-6V24zM42 0h6v12h-6V0zm-6 12h6v12h-6V12zm12 0h6v12h-6V12zM36 36h6v12h-6V36zm12 0h6v12h-6V36zm-6-12h6v12h-6V24zm12 0h6v12h-6V24z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

ul.gallery {
  --numcolumns: 4;
  --gap: 0.25em;
  --size: calc(100vw / var(--numcolumns));
  display: grid;
  grid-template-columns: repeat(var(--numcolumns), 1fr);

  grid-template-rows: auto;
  gap: var(--gap);
  align-items: stretch;

  list-style: none;
}

ul.gallery > li {
  display: block;
  height: calc(var(--size) - var(--gap));
}

ul.gallery > li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

p {
  text-align: left;
  margin-left: 2em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  font-size: 20px;
}

a:link {
    color: darkcyan;
    text-decoration: none;
}

a:visited {
    color: burlywood;
}

footer {
    position: fixed;
    bottom: 0;
    max-width: 100px;
    margin-left: 1em;
}

.title {
    background-color: #f1e9da;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='48' viewBox='0 0 60 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='fancy-rectangles' fill='%23f1e9da' fill-opacity='0.4'%3E%3Cpath d='M6 12h6v12H6V12zm12 0h6v12h-6V12zm6-12h6v12h-6V0zM12 0h6v12h-6V0zm0 24h6v12h-6V24zM0 0h6v12H0V0zm6 36h6v12H6V36zm12 0h6v12h-6V36zm12-12h6v12h-6V24zM42 0h6v12h-6V0zm-6 12h6v12h-6V12zm12 0h6v12h-6V12zM36 36h6v12h-6V36zm12 0h6v12h-6V36zm-6-12h6v12h-6V24zm12 0h6v12h-6V24z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}