/* ========================================
   PARALLAX & BOOK STYLE
   ======================================== */

body {
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
}

/* Parallax Background */
.parallax {
  overflow: hidden;
  background-color: #f5f5f5;
  position: relative;
  background-image: url(./pics/backpic4.png);
  min-height: 100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  background-size: 100vw 100vh;
}

/* Book Top Border */
.book-top {
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  background-image: url(./pics/bgtop.png);
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  left: 0;
  background-position: top center;
  z-index: 100;
  height: 22px;
  width: 100%;
  background-size: 100vw 100%;
}

/* Book Bottom Border */
.book-bot {
  background-color: #f5f5f5;
  background-image: url(./pics/bgbot.png);
  background-repeat: no-repeat;
  position: fixed;
  bottom: 0;
  left: 0;
  background-position: bottom center;
  z-index: 100;
  height: 23px;
  width: 100%;
  background-size: 100vw 100%;
}

/* Book Bottom High (optional extended bottom) */
.book-bot-high {
  background-image: url(./pics/bg_bot_high.png);
  background-repeat: no-repeat;
  position: fixed;
  bottom: 0;
  left: 0;
  background-position: bottom center;
  z-index: -2;
  height: 455px;
  width: 100%;
  background-size: 100vw 100%;
}

/* ========================================
   CLICKABLE ELEMENTS
   ======================================== */

.clickable {
  display: inline-block;
  transition: color 0.2s, transform 0.2s;
}

.clickable:hover {
  color: darkred;
  transform: scale(1.05);
  cursor: pointer;
  transform-origin: center;
}

.clickable2 {
  display: inline-block;
  transition: color 0.2s, transform 0.2s;
}

.clickable2:hover {
  color: darkred;
  transform: scale(1.02);
  cursor: pointer;
  transform-origin: center;
}

/* ========================================
   RESPONSIVE MEDIA QUERIES
   ======================================== */

/* Extra small screens (< 576px) */
@media (max-width: 575.98px) {
  .parallax {
    background-size: 95vw 100%;
  }

  .book-top {
    background-size: 95vw 100%;
  }

  .book-bot {
    background-size: 95vw 100%;
  }

  .book-bot-high {
    background-size: 95vw 100%;
  }

  .portrait {
    transform: translateY(0) !important;
  }
}

/* Small screens (576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .parallax {
    background-size: 540px 100%;
  }

  .book-top {
    background-size: 540px 100%;
  }

  .book-bot {
    background-size: 540px 100%;
  }

  .book-bot-high {
    background-size: 540px 100%;
  }

  .portrait {
    transform: translateY(0) !important;
  }
}

/* Medium screens (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .parallax {
    background-size: 720px 100%;
  }

  .book-top {
    background-size: 720px 100%;
  }

  .book-bot {
    background-size: 720px 100%;
  }

  .book-bot-high {
    background-size: 720px 100%;
  }
}

/* Large screens (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .parallax {
    background-size: 960px 100%;
  }

  .book-top {
    background-size: 960px 100%;
  }

  .book-bot {
    background-size: 960px 100%;
  }

  .book-bot-high {
    background-size: 960px 100%;
  }
}

/* Extra large screens (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .parallax {
    background-size: 1140px 100%;
  }

  .book-top {
    background-size: 1140px 100%;
  }

  .book-bot {
    background-size: 1140px 100%;
  }

  .book-bot-high {
    background-size: 1140px 100%;
  }

  .content {
    padding-left: 25px !important;
  }
}

/* Extra extra large screens (>= 1400px) */
@media (min-width: 1400px) {
  .parallax {
    background-size: 1320px 100%;
  }

  .book-top {
    background-size: 1320px 100%;
  }

  .book-bot {
    background-size: 1320px 100%;
  }

  .book-bot-high {
    background-size: 1320px 100%;
  }

  .content {
    padding-left: 25px !important;
  }
}