.backside {
  display: none;
}

.frontside {
  display: none;
  padding: 0.5vw 1vw;
  height: 25vw;
  padding-top: 2vw;
 
}





.Book {
    position: relative;
    width: 21vw;
    height: 25vw;
    background: #15d6e4;
    transform-style: preserve-3d;
    margin: auto;
    box-shadow: inset 21vw 0 5vw rgba(105, 104, 104, 0.5), 1vw 0 1vw rgba(250, 242, 242, 0.5);
    transform: rotate(10deg);
    transition: 1s;
  }
  

  .Book:hover {
    transform: translate(50%,0%) perspective(1500px) rotate(0deg) scale(1.01);
    box-shadow: inset 1vw 0 2vw rgba(105, 104, 104, 0.5), 0 1vw 2vw rgba(250, 242, 242, 0.5);
  }

  .Page   {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-origin: left;
    transition: .7s;
    overflow: hidden; 
    transform:perspective(1500px);
    box-shadow: inset 2px 0 2px rgba(105, 104, 104, 0.5), 0 1px 2px rgba(250, 242, 242, 0.5);
    text-align: center;
   
  }
  
  #cover .frontside {
    padding-top: 3vw;
    display: block;
    font-size: 2vw;
    font-style: oblique;
    line-height: 6vw;
  }

  





.button {
  border: none;
  width: 5vw;
  font-size: 1.2vw;
  background-color:transparent;
  text-decoration: underline;
  color: rgb(7, 7, 7);
  
}
  

.button:hover {
  cursor:pointer;
  color:white;
  font-style: italic;
  font-weight: bold;
}
  



.backside .button {
  transform: translate(-200%,-200%) rotateY(160deg);
  position: absolute;
  top:100%;
 
}


.frontside .button {
 position: absolute;
 top:85%;
 left:75%;
}



.backside img {
  width: 21vw;
  height: 25vw;
  object-fit: cover;
  z-index: -1;
}



.color1 {
  margin-bottom: 2vw;
  transform: rotate(-15deg);
}


.para1 {
  font-size: 1.5vw;
  line-height: 2vw;
  margin-bottom: 2vw;
  transform: rotate(-15deg);
}

.para2 {
  margin-bottom: 2vw;
  font-size: 1.5vw;
  font-style: italic;
  transform: rotate(-15deg);

}




@media screen and (max-width: 500px) { 

  .Book {
    width: 38vw;
    height: 45vw;
    margin-bottom: 20px;
}


.backside img {
  width: 38vw;
  height: 45vw;
}


.frontside {
  padding: 1vw 2vw;
  height: 45vw;
  padding-top: 4vw;
 
}

.frontside  p{
  font-size: 2.5vw;
  line-height: 3vw;
  
}


#cover .frontside {
  padding-top: 8vw;
  line-height: 8vw;
}
.button {
  font-size: 2.5vw;
}


}


@media screen and (min-width: 500px) and (max-width: 800px) {

  .Book {
    margin-top: 10px;
    width: 24vw;
    height: 31vw;
    margin-bottom: 20px;
}

.backside img {
  width: 24vw;
  height: 31vw;
}



.frontside {
  padding: 0vw 2vw;
  height: 31vw;
  padding-top: 1vw;
 
}

.frontside  p{
  font-size: 1.9vw;
  line-height: 1.9vw;
  
}


.button {
  font-size: 2.2vw;
}




 }