@import url(./snow.css);

:root {
  --color-blue: #87d1f4;
  --color-blue-dark: #4e93b4;
  --color-blue-light: #c4e3f7;
  --color-red: #ee1b40;
  --color-red-dark: #ad0926;
  --color-red-light: #f45366;

  --font-cursive: 'Amarillo', cursive;
  --font-handwritten: 'Architects Daughter', cursive;
}

body.is-clipped {
  height: 100vh;
}

.webp .amazon-button {
  background-image: url(../assets/amazon.webp);
}

.no-webp .amazon-button {
  background-image: url(../assets/amazon.png);
}

.amazon-button {
  background-size: contain;
  cursor: pointer;
  display: inline-block;
  height: 50px;
  width: 157px;
}

.amazon-button:hover {
  opacity: 0.8;
}

.header-text {
  background-clip: text;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    90deg,
    var(--color-red-dark),
    var(--color-red),
    var(--color-red-light),
    var(--color-red-dark)
  );
  color: var(--color-red);
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: 'Amarillo', sans-serif;
  font-weight: 400;
  line-height: 2.4em;
  text-indent: 0.2em;
}

.paragraph:first-child::first-letter {
  color: var(--color-red);
  font-family: 'Amarillo', cursive;
  font-weight: bold;
  font-size: 36px;
  float: left;
  line-height: 36px;
  padding-right: 8px;
}

.paragraph {
  font-size: 18px;
  line-height: 36px;
}

.about {
  font-size: 18px;
  line-height: 36px;
}

.about .title {
  display: inline-block;
  font-size: 1.5em;
  margin-bottom: -0.5em;
}

.hero {
  --string-length: 600px;
  background-color: var(--color-blue);
  background-image: linear-gradient(var(--color-blue), var(--color-blue-light));
}

.hero-head .navbar-brand .title {
  color: var(--color-blue-dark);
  font-size: 14px;
  font-weight: 400;
}

.hero-head .navbar-brand .cursive {
  font-family: var(--font-cursive);
  font-size: 18px;
}

.hero-head .navbar-burger {
  z-index: 1;
}

.hero-head .navbar-menu.is-active {
  bottom: 0;
  box-sizing: border-box;
  height: 100vh;
  left: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: fixed;
  top: 0;
  width: 100vw;
}

.hero-head .navbar-menu.is-active .buttons {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
}

.hero-head .navbar-menu.is-active .button {
  background-color: transparent;
  color: var(--color-blue-dark);
  font-family: var(--font-handwritten);
  font-size: 2rem;
  justify-content: center;
  line-height: 4rem;
  text-align: center;
  width: 100%;
}

.hero-head .amazon-button {
  height: 40px;
  margin-bottom: 6px;
  width: 125px;
}

.hero-head .navbar-menu.is-active .amazon-button {
  margin-top: 2rem;
  height: 60px;
  width: 190px;
}

.hero-body .title {
  font-size: 4rem;
  margin-bottom: 0 !important;
  padding-left: 10px;
}

.hero-body .subtitle {
  font-family: var(--font-handwritten);
  font-size: 2rem;
  padding-left: 160px;
  padding-top: 200px;
}

@media screen and (max-width: 768px) {
  .hero-body .subtitle {
    padding-left: 0;
    padding-top: 200px;
    text-align: center;
  }
}

.hero-body .img-ball {
  align-items: center;
  bottom: var(--string-length);
  display: flex;
  margin-left: 80px;
  min-width: 315px;
  position: relative;
}
.hero-body .img-ball .ball-container .string {
  background-color: grey;
  bottom: 360px;
  content: 'aldskfj';
  display: block;
  height: var(--string-length);
  left: 157px;
  width: 1px;
  position: absolute;
}

.hero-body .img-ball .ball-container {
  position: relative;
  z-index: 3;
}

.hero-body .img-ball .ball-container img {
  height: 360px;
  position: relative;
  width: 315px;
}

.webp .hero-body .img-santa {
  background-image: url('../assets/santa_1.webp');
}

.no-webp .hero-body .img-santa {
  background-image: url('../assets/santa_1.png');
}

.hero-body .img-santa {
  background-position-x: 60px;
  background-position-y: 85px;
  background-repeat: no-repeat;
  background-size: 150px;
  height: 360px;
  position: absolute;
  width: 315px;
  z-index: 2;
}

.hero-body .header-column {
  min-height: 300px;
}

.crystalBall {
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transform-origin: 50% calc(-1 * var(--string-length));
  transform-style: preserve-3d;
}

.hills-container {
  --height: 240px;
  --offset: 10vw;
  overflow: hidden;
  position: relative;
}
.hills {
  height: var(--height);
  margin-left: calc(-0.5 * var(--offset));
  width: calc(100vw + 2 * var(--offset));
}
.hills > img {
  height: var(--height);
  max-width: initial;
  min-width: calc(100vw + 2 * var(--offset));
}
.hills:nth-child(1) {
  margin-left: calc(2 * var(--offset));
  padding-top: 20px;
}
.hills:nth-child(2) {
  margin-left: calc(-0.5 * var(--offset));
}

@media screen and (max-width: 768px) {
  .hills:nth-child(1) {
    margin-left: calc(-4 * var(--offset));
  }
  .hills:nth-child(2) {
    margin-left: calc(-11.5 * var(--offset));
  }
}

.hills .tree {
  animation: tree 4s 0.1s infinite alternate
    cubic-bezier(0.455, 0.03, 0.515, 0.955);
  position: absolute;
  z-index: -1;
}
.hills .tree img {
  height: 100px;
}

.hills .tree-1 {
  animation-delay: 0.5s;
  left: 800px;
  bottom: 90px;
}

.hills .tree-2 {
  animation-delay: 1s;
  left: 160px;
  bottom: 150px;
}

.hills .tree-3 {
  animation-delay: 0.25s;
  left: 75vw;
  bottom: 115px;
}

@media screen and (max-width: 768px) {
  .hills .tree-1 {
    animation-delay: 0.5s;
    left: 800px;
    bottom: 90px;
  }

  .hills .tree-2 {
    left: 100px;
  }

  .hills .tree-3 {
    left: 95vw;
    bottom: 135px;
  }
}

.swing-1 {
  -webkit-animation: swing 4s infinite alternate
    cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: swing 4s infinite alternate
    cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: swing 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.webp .synopsis-section {
  background-image: url('../assets/footprints.webp');
}

.no-webp .synopsis-section {
  background-image: url('../assets/footprints.png');
}

.synopsis-section {
  background-position-x: 100%;
  background-position-y: 100%;
  background-repeat: no-repeat;
  background-size: 25% auto;
}

@media screen and (max-width: 768px) {
  .synopsis-section {
    background-size: 75% auto;
    padding-bottom: 12rem;
    padding-top: 0;
  }
}

.synopsis-section .cover-image {
  margin: auto;
  padding: 3rem 0;
  transform: rotate(-5deg);
  width: 300px;
}

.webp
.inside-book-1-section,
.inside-book-2-section {
  background-image: url(../assets/book_1.webp);
}

.no-webp
.inside-book-1-section,
.inside-book-2-section {
  background-image: url(../assets/book_1.png);
}

.inside-book-1-section,
.inside-book-2-section {
  background-position-x: center;
  background-position-y: center;
  background-size: cover;
  min-height: 80vh;
  padding: 0;
}

.inside-book-2-section {
  background-image: none;
  border-top: 1px solid grey;
  margin-bottom: -6px; /* remove white space at bottom */
  min-height: 0;
}

.inside-book-2-section picture {
  width: 100vw;
}

.author-bio-section .title {
  font-family: var(--font-cursive);
  font-weight: 400;
}

.author-bio-section .subtitle {
  line-height: 1.8rem;
  color: grey;
  margin-top: 20px;
}

.author-bio-section .subtitle,
.author-bio-section .about {
  padding-left: 30px;
  padding-bottom: 1rem;
}
.author-bio-section .paragraph {
  padding-left: 30px;
}

@media screen and (max-width: 768px) {
  .author-bio-section .subtitle,
  .author-bio-section .paragraph {
    padding-left: 0;
  }
}

.cta-section {
  background-color: var(--color-blue-light);
}

.footer {
  background-color: #586ea8;
  color: white;
  padding: 3rem 1.5rem;
}

.footer a {
  color: var(--color-blue-light);
  text-decoration: underline;
}

.footer a:hover {
  color: var(--color-red-light);
}

.footer small {
  opacity: 0.5;
}

.footer strong {
  color: var(--color-blue-light);
}

@keyframes tree {
  0% {
    -webkit-transform: translate3d(15%, 0, 0) rotateZ(10deg);
    -moz-transform: translate3d(15%, 0, 0) rotateZ(10deg);
    transform: translate3d(15%, 0, 0) rotateZ(10deg);
  }
  100% {
    -webkit-transform: translate3d(-15%, 0, 0) rotateZ(-10deg);
    -moz-transform: translate3d(-15%, 0, 0) rotateZ(-10deg);
    transform: translate3d(-15%, 0, 0) rotateZ(-10deg);
  }
}

@keyframes swing {
  0% {
    -webkit-transform: rotateZ(5deg);
    -moz-transform: rotateZ(5deg);
    transform: rotateZ(5deg);
  }
  100% {
    -webkit-transform: rotateZ(-5deg);
    -moz-transform: rotateZ(-5deg);
    transform: rotateZ(-5deg);
  }
}