.container {
    position: relative;
    width: 100%;
    height: 180vh;
    overflow: hidden;
} /* this container is used to make the page scrollable */

.wrapper {
  position: relative;
  transform: translate(40px, 10px); 
} /* this wrapper is used to let everything be moved together */

.book {
  width: 90%;
  display: block;
  display: block;
  margin: 0 auto;
  z-index: 3;
  position: relative;
  
}


#Clipy {
  position: absolute;
  width: 9%;      
  bottom: 3%;
  left: 0%;
  z-index:5 ;
}


#Clipy:active {
  transform: rotate(10deg);
} /* the clipy roates when hovered over */



.clipyText {
  position: absolute;
  width: 25%;      
  bottom: -2%;
  left: -3%;
  z-index:4;
}

body {
    background-image: url(blanket.png);
    background-size: cover;
    background-attachment: fixed;

}

a > img {
  position: absolute;
  width: 10%;      
  z-index:3 ;
} 

a > img:hover {
  width: 11%;
} /* the button grows when hovered over */

#back {                                                             
  top: 5%;
  left: 0%;
}