/* Base styles provided by Windrift */

/* Give the base container some breathing room */
.container {
  margin: 2em 15%;
  /* Leave some empty space below the story, so text that appears at the bottom
     of the current chapter isn't pinned against the page edge (index.html also
     scrolls each new section into view). */
  padding-bottom: 25vh;
}

/* Center the story images; Foundation leaves figure with the browser's default
   side margins and img inline, which sits them slightly off-center. */
figure {
  margin: 1em 0;
  text-align: center;
}
figure img {
  display: block;
  margin: 0 auto;
}

/* Room above a section when it is scrolled to the top of the viewport */
section, .current-section {
  scroll-margin-top: 1rem;
}

/* If the scrolling mode is "scrolling", ensure that the most-recent chapter
doesn't bump up against the bottom margin */
.pagination-scrolling .current-chapter {
  margin-bottom: 3em;
}

/* If the scrolling mode is "by-chapter", only the current chapter should be visible */
.pagination-by-chapter .chapter {
  display: none;
}
.pagination-by-chapter .current-chapter {
  display: block
}

/* If the scrolling mode is "by-section", only the current section of the current
chapter should be visible */
.pagination-by-section .section,
.pagination-by-section .chapter .current-section {
  display: none;
}
.pagination-by-section .current-chapter .current-section {
  display: block
}

.section-enter, .section-appear {
  opacity: 0.01;
}

.section-enter.section-enter-active, .section-appear.section-appear-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.section-leave {
  opacity: 1;
}

.section-leave.section-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}