/* https://keithclark.co.uk/articles/pure-css-parallax-websites/ */

body, html {
  overflow-x: hidden;
}

.parallax-viewport{
  max-width: 1224px;
}

/*purple mountains, above the navbar*/
.parallax--sky{
  background-image: url("space-and-mountains.jpg");
  height: 200px;

  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  
  /* for children */
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background-position-y: -554px;
}

.cabin-sketch{
  font-family: 'Cabin Sketch', cursive;
}

.heading-annie-tele{
  font-family: 'Annie Use Your Telescope', cursive;
}

.stylish{
  font-family: 'Stylish', sans-serif;
  font-size: 43px;
}

/*only display when ultra small*/
.ultra-small{
  display: none;
  width: 100%;
  /*height: 395px;*/
  height: auto;
  text-align: center;
}

.ultra-small img{
  width: 88%;
  height: auto;
}

.book-clickable{
  cursor:pointer;
  height: 612px;
  position: relative;
  width: 100%;
}

.avail-kindle{
  color: white;
  font-size: 22px;
  text-align: center;
  position: relative;
  width: 100%;
  min-height: 34px;
  padding-left: 9px; padding-right: 9px;
  padding-top: 14px; padding-bottom: 14px;
}

.black-ribbon{
  width: 100%;
  text-align: center;
  color: white;
  min-height: 34px;

  background-color: rgba(0, 0, 0, 0.5);
  max-width: 560px;
}

.caption-white{
  background-color: rgba(255,255,255,0.7);
  padding: 26px;
  max-width: 655px;
  text-align: justify;
  padding-left: 31px;
  padding-right: 31px;
  max-width: 560px;
}

.flex-cont-centered{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.videoWrapper {
  float: none;
  clear: both;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
  overflow: hidden;
  max-width: 560px;
  width: 100%;
}

.videoWrapper iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.closedropshad{
  filter: drop-shadow(1px 3px 2px #555555);
}

/* Hide the sky above navbar unless device width > 376 and height > 840 */
@media (max-width: 376px), (max-height: 840px) {
  .parallax--sky{
    /*border:3px dashed red;*/
    display:none;
  }
}


/* Delete below ------------------------------------ */

/*.parallax--california{
  border: 5px dashed greenyellow;
}
.top-adjust{
  border: 5px dashed yellow;
}
.scene-3d{
  border: 5px dashed purple;
}
.ultra-small{
  border: 5px dashed cyan;
}
.avail-kindle{
  border: 5px dashed yellow;
}*/