.floatright {
  float: right;
  padding-left: 6px;
}

.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
  gap: 12px 10px;
}

.images {
  text-align: center;
}

html {
  overflow-y: scroll;
}

body {
  color: white;
  background-color: #262626;
  text-align: left;
}

main {
  width: 50vw;
  margin-left: auto;
  margin-right: auto;
}

header {
  width: 100%;
  display: inline-grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-around;
  font-size: smaller;
}
header > span {
  text-align: right;
}
header a {
  text-decoration: none;
}

h2 {
  text-align: center;
}

a:link, a:visited {
  color: lightslategrey;
}

nav {
  display: inline-flex;
  gap: 1rem;
  grid-template-columns: repeat(8, 3rem);
  justify-content: center;
  align-items: flex-end;
  font-family: sans-serif;
}

.thumbnail {
  font-size: smaller;
  text-align: center;
  vertical-align: bottom;
  width: 100px;
}

.nav-links {
  margin-top: 2rex;
  display: grid;
  grid-template-columns: repeat(2, 4rem);
  justify-content: center;
}

.next {
  text-align: right;
}
.next > a {
  text-decoration: none;
}

.prev {
  text-align: left;
}
.prev > a {
  text-decoration: none;
}

svg {
  fill: white;
}

/* Small and medium devices (landscape tablets, 992px and down) */
@media only screen and (max-width: 992px) {
  main {
    width: 100vw;
  }
}
/* Large tablets that are <= 1640px wide and in portrait orientation, e.g., iPad Air 5 */
@media screen and (max-width: 1640px) and (orientation: portrait) {
  main {
    width: 95vw;
  }
}