/* Imports */
/* Note that fonts MUST be imported synchronously using the link element,
 * otherwise the page structure may not render properly */

/* Styling */

.pages-container {
  font-size: min(4vw, 1rem);
  position: relative;
}

/* A page without a medium needs some default styling. */
.aspect-ratio {
  margin: 1rem 0;
  /* The padding-top should be the ratio of the bg image's width / height */
  padding-top: calc(400 / 700 * 100%);
  position: relative;
}
.page {
  height: 0;
  padding: 2rem 2rem 3rem;
  position: absolute;
  height: 100%; width: 100%; top: 0; left: 0;
  box-sizing: border-box;
}
.page::before {
  content: "";
  position: absolute;
  height: 100%; width: 100%; top: 0; left: 0;
  pointer-events: none;
  background-image: linear-gradient(beige, antiquewhite);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
}

.content {
  position: relative;
  display: flex;
  flex-direction: column;
}
.content > * {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

p, img, div { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { line-height: 1em; }
  

/* Each medium gets its own style. */

.vintage-book {
  font-family: 'Libre Baskerville', serif;
  color: #514132;
  line-height: 1.5em;
  text-align: justify;
}
.vintage-book .aspect-ratio {
  padding-top: calc(2500 / 2250 * 100%);
}
.vintage-book .page {
  padding: 8vw 17vw;
}
.vintage-book .page::before {
  background-image:
    url(http://topia.wikidot.com/local--files/cqb:book/book.1000px.webp);
}
.vintage-book > :nth-child(2n+1) .page::before {
  transform: scaleX(-1);
}
.vintage-book .content {
  transform: skewY(-0.5deg);
}
.vintage-book > :nth-child(2n+1) .content {
  transform: skewY(0.5deg);
}
.vintage-book .split-paragraph-start {
  text-align-last: justify;
}
.vintage-book .content > p:not(.split-paragraph-end):not(.is-image) {
  text-indent: 2em;
}

.letter .page {}