body {
  margin: 0;
  padding: 0;
}

/* Style images and container */
main {
  /* Contains images */
  margin: 0;
  padding-top: 20vmin;
  padding-bottom: 20vmin;
  background: black;
  color: yellow;
  text-align: center;
  height: calc(100vh - 40vmin);
  width: 100vw;
  position: fixed;
  overflow-y: auto;
  font-size: 20px;
  scroll-behavior: smooth; /* Means anchor links will scroll smoothly */
}
main ul {
  list-style-type: none; /* No bullet points */
}

main img {
  display: block;
  height: 60vmin;
  margin: auto; /* Centered */
  margin-bottom: 10vmin;
  margin-top: 10vmin;
}

::-webkit-scrollbar {
  width: 5vmin;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: radial-gradient(#ccc, white);
  border-radius: 2.5vmin;
}
::-webkit-scrollbar-thumb:hover {
  background: radial-gradient(#888, #ccc);
}

/* Scroll Snap */

main {
  scroll-snap-type: y mandatory;
  scroll-padding: 10vmin;
}

main li {
  scroll-snap-align: start;
}

/* Preview Bars */

#bar_before {
  top: 0;
}
#bar_after {
  bottom: 0;
}

#bar_before,
#bar_after {
  z-index: 1;
  position: fixed;
  left: 0;
  background: #111111;
  width: calc(100vw - 4vmin);
  height: 6vmin;
  padding: 2vmin;
  text-align: center;
}

#bar_before ul,
#bar_after ul {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
  display: grid;
  grid-template-rows: 6vmin;
  grid-template-columns: repeat(16, 6vmin);
  grid-gap: 1vmin;
  width: calc(6vmin * 16 + 1vmin * 15);
  margin: auto; /* Centered */
}

#bar_before ul li,
#bar_after ul li {
  opacity: 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  transition: all 0.5s;
}

#bar_before ul li img,
#bar_after ul li img {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  transition: all 0.5s;
}
#bar_before ul li.hidden,
#bar_after ul li.hidden {
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s;
}
#bar_before ul li.hidden img,
#bar_after ul li.hidden img {
  margin: 50%;
  height: 0;
  width: 0;
  transition: all 0.5s;
}