html,body{min-height:100vh}
body{display:flex;justify-content:center;align-items:center;overflow:hidden; color: rgb(68, 39, 1); font-family: 'Montserrat', sans-serif;}
h1,h2,h3{font-family: 'Dancing Script', cursive;}
h1{
  font-size: 3.5em;
  text-align: center;
}
h2{
  font-size: 2.5em;
}
h3{
  font-size:1.5em;
  margin-bottom: 0;
}

button{
  align-self: center;
  width: 5rem;
  margin: 5px;
  padding: 5px;
  background-color:rgb(83, 47, 0, 0.5) ;
  border: none;
  border-radius: 5px;
  color: rgb(83, 47, 0);
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  font-weight: bold;
}

button:hover{
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.5);
}

input, select{
  background-color: rgb(247, 246, 226);
}
.save-btn{
  width: 1.7rem;
}
.flex-wrapper{
  display:flex;
  justify-content: space-between;
  align-items: center;
}
/*PAGE FLIP
The .book is a container with relative position to be use as reference for position of its children*/
.book {position:relative; transform-style:preserve-3d}/*preserve-3d is needed to have a z axis (perspective, translateZ)  */
/* The page container is the one that makes the flips that change the page making the visible hidden and vice versa*/
.page { position:absolute; width:33rem; height:49rem; top:0.5%; left:50.1%; transform-style:preserve-3d;  }
/*To have a page with text for both parts we need the sides to be hidden were are on its back and be in the exact position */
.side { position:absolute; top:0; left:0; backface-visibility:hidden; width:100%; height:100%; transform-style:preserve-3d; }
.side0 { transform:none; }/*This side starts visible*/
.side1 { transform:rotateY(180deg); }/*This side starts hidden*/
.book { width:100rem; height: 50rem; perspective:2000px; } /* Perspective: how far is from the screen, like transformz() but affects all of its children*/
.page { transition:transform 2s; transform-origin:left center; }/*transform-origin makes the flip be from the left instead of the center*/

/* BUTTONS CHANGE PAGE
hover: display: none / block rgb(3,3,3, 0.6)
*/
.to-the-left {
  position:absolute;
  bottom: 24rem;
  left: 20rem;
  width: 11rem;
  height: 5rem;
  filter: opacity(50%)
}
.to-the-right {
  position:absolute;
  bottom: 24rem;
  right: 17%;
  width: 11rem;
  height: 5rem;
  display: flex;
  justify-content: flex-end;
  filter: opacity(50%)
}
.to-the-right:hover, .to-the-left:hover {
  filter: opacity(100%)
}

i{
  color: rgb(83, 47, 0)
}

i:active{
  color: rgb(168, 126, 75)
}
/*---------*/
.img-book{
  position:absolute; width:70%; max-height: 100%; z-index: -10; top:0; left: 15%;
}

.side0 { 
    background-image: url('./img/rPage.png');
    background-size: cover;
  }
  .side1 { 
    background-image: url('./img/lPage.png');
    background-size: cover
  }


body {
  background-image: url('./img/background-table.jpg');
  display: flex;
  flex-direction: column; 
}

img{
    max-width: 100%
}



/*Nav*/
nav{
  display:flex;
  justify-content: space-between;
  width: 60%;
  height: 3rem; 
}
#nav-buttons{
  width: 30rem;
  display: flex;
  justify-content: space-between;
}
#nav-icon{
  background: url('./img/icono-libro.png') no-repeat bottom;
  background-size: contain;
  width: 8rem;
}
#title-nav{
  text-align: center;
  margin-top: 0.7rem;
  font-size: 1.4em;
  font-family: 'Dancing Script', cursive;
}

/* home */
.home{
  margin-left: 5rem;
  width: 25rem;
  height: 50rem;
}
#page-title{
  margin-top: 5.4rem;
}

#basic-search{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 30rem;

}

.btn-b{width: 10%; height:1.5rem;}

.more-btn{
  width:10rem;
}
.question{
  font-size: 1.2em;
}

/*flex-recomendations */
.recomendations{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 10px 10px;
  margin: 0 2rem;
  height: 48em;
}

.recomendations h1{
 margin-left: 2rem;
}
.flex-recomendations{
  display:flex;
  flex-wrap: wrap;
}
.recomendations img{
  width: 8rem;
  display: block;
  margin: 1rem;
}
/*
basic-recomendations
*/

#flex-img-info{
display: flex;
margin-top: 1rem;
}
.info-book{
  width: 50%;
  margin-left: 3rem;
}
.title-book-info{
  text-align: center;
  margin-bottom:0;
  margin-top:5rem;

}

#flex-img-info img{
  width: 8rem;
  object-fit: contain;
  margin: 0.4rem 1rem 0;
}
/*SEARCH*/
.book-description{
  overflow-y: scroll;
  height: 10rem;
}

/* Advance search*/

#adv-search{
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  height: 55em;
}
#inputs-adv-search{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 40rem;
}
#adv-search input[type='text'], .language-input{
  width: 15rem;
}

#adv-search button{
  width:10rem
}

/*Login*/
#login-signup{
  padding: 2rem 5rem;
  height: 38rem;
}
.signup-form{
  display:flex;
  flex-direction: column;
}
.signup-form input[type='text'], .signup-form input[type='password']{
  width:50%;
  margin: 2px;
}
.input-wrapper-s{
  display:flex;
}
#email{
  width:30%
}
#policies-wrapper{
  font-size: 0.7em;
}

/*My page*/
#recomendations3{
  display:flex;
  flex-direction: column;
  justify-content: space-around;

}

#recomendations3 h2{
  text-align: center;
  margin-bottom: 0;
}

.like-list{
  overflow-y: scroll;
  height: 8em;
  margin: 5px;
  width: 28em;
  padding: 5px;
  border-bottom: 4px solid rgb(83, 47, 0);
}

/*FAQ*/
.faq{
  padding: 0rem 3rem;
}

/* SHADOWS
Add shadow to the book img only
.page:first-of-type .side0 { 
  box-shadow:-10px 0 10px -6px rgba(0,0,0,0.3);
} 

.page:last-of-type .side1 {
  box-shadow:10px 0 10px -6px rgba(0,0,0,0.3);
} 
*/
@media (max-width: 1820px){
  .to-the-left {
    bottom: 24rem;
    left: 11%;
    width: 15%;
    height: 10%;
    z-index: 99;
  }
  .to-the-right {
    bottom: 24rem;
    right: 11%;
    width: 15%;
    height: 10%;
    z-index: 99;
  }
}
@media (max-width: 1560px){
  .to-the-left {
    left: 8%;
  }
  .to-the-right {
    right: 8%;
  }
}
@media (max-width: 1420px){
  .to-the-left {
    left: 0%;
  }
  .to-the-right {
    right: 0%;
  }
}
@media (max-width: 1130px){
  body{font-size: 10px;}
.page {width:23.5rem; height:37.6rem; top:0.5%; left:50.1%;}
.side {top:0; left:0; backface-visibility:hidden; width:100%; height:100%}
.book {width:100rem; height: 50rem;} 
.to-the-left {
  left: 10%;
}
.to-the-right {
  right: 10%;
}
.img-book{
  width:50%; max-height: 100%; z-index: -10; top:0; left: 25%;
}

.home{
  margin-left: 2rem;
  margin-top: -2rem;
  width: 20rem;

}
.recomendations img{
  width: 5rem;
  display: block;
  margin: 1rem;
}

.info-book{
  margin-left:0;
}

.recomendations{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 10px 10px;
  margin: 0 2rem;
  height: 58em;
}

#login-signup{
  padding:1rem
}
}

@media (max-width: 950px){
  .to-the-left {
    left: 0;
  }
  .to-the-right {
    right: 0;
  }
}
@media (max-width: 825px){
  .fa-5x{
    font-size:3em;
  }

  body{
    margin:0;
    padding:0;
  }
  nav{
    width: 100%;
    height: 1.5rem;
    margin:0;
  }

  nav button{
    height:1.5rem;
    
  }
  button{
    height: 1.5rem;
    font-size: 0.8rem;
  }
  .unnecesary{
    display:none
  }
  .book { position:relative; transform-style:preserve-3d}
  .page { position:absolute; width:18.5rem; height:19.5rem; top:0.5%; left:50.1%; transform-style:preserve-3d;  }
  .side { position:absolute; top:0; left:0; backface-visibility:hidden; width:100%; height:100%; transform-style:preserve-3d; }
  .side0 { transform:none; }
  .side1 { transform:rotateY(180deg); }
  .book { width:100rem; height: 50rem; perspective:2000px; } 
  .page { transition:transform 2s; transform-origin:left center; }

  h1, h2, .recomendations img{
    margin:0;
  }

  .to-the-left {
    top: 13%;
    left: 0;
    width: 10%;
    height: 12%;
  }
  .to-the-right {
    top: 13%;
    right: 0;
    width: 10%;
    height: 12%;
  }
  .img-book{
    position:absolute; width:40%; height:20rem ; z-index: -10; top:0; left: 30%;
  }
  
  .home{
    margin-left: 1rem;
    margin-top: 1.3rem;
    width: 16rem;
    height: 17rem;
  }
  #basic-search{
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 12rem;
  
  }
#page-title{
  margin-top:0
}
  .recomendations{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px 10px;
    margin: 1.3rem;
    height:22em;
  }
  .recomendations img{
    width: 3rem;
    display: block;
  }
  #flex-img-info img{
    width:6rem;
    margin-left:0;
  }

  #adv-search{
    padding: 0.5rem 2rem;
    display: flex;
    flex-direction: column;
    height:30em;
  }

  .adv-flex{
    display:flex;
    height: 1rem;
    align-items: center;
    justify-content: space-between;
  }
  #inputs-adv-search{
    margin-top:1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 15rem;
  }
  #adv-search input[type='text'], .language-input{
    width: 9rem;
  }


    #login-signup input{
      width: 30%
    }
    .like-list{
      width: 20em;
    }
    .message-container-s{
      font-size: 0.7em
    }
    .faq{
      padding: 0.7rem;
      font-size: 0.5rem;
    }
    .like-list{
      display:none;
    }
    #title-nav{
      text-align: center;
      margin-top: 0;
      font-size: 1.4em;
      font-weight: bold;
      font-family: 'Dancing Script', cursive;
    }
}  

  @media (max-width: 652px){
    body{
      font-size: 8px;
    }
    .book { position:relative; transform-style:preserve-3d}
    .page { position:absolute; width:16.2rem; height:18.5rem; top:0.5%; left:50.1%; transform-style:preserve-3d;  }
    .side { position:absolute; top:0; left:0; backface-visibility:hidden; width:100%; height:100%; transform-style:preserve-3d; }
    .side0 { transform:none; }
    .side1 { transform:rotateY(180deg); }
    .book { width:100rem; height: 50rem; perspective:2000px; } 
    .page { transition:transform 2s; transform-origin:left center; }
    .to-the-left {
      position:absolute;
      top: 12%;
      left: 0;
      width: 15%;
      height: 10%;
      z-index: 99;
    }
    .to-the-right {
      position:absolute;
      top: 12%;
      right: 0;
      width: 15%;
      height: 10%;
      z-index: 99;
    }
    .img-book{
      position:absolute; width:34%; height:19rem ; z-index: -10; top:0; left: 33%;
    }
    
    .unnecesary-faq{
      display:none
    }
    .recomendations{height: 14rem;}
    }



    @media (max-width: 550px) and (orientation: portrait) {
      html {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vh;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
      }
      .to-the-left {
        bottom: 24rem;
        left: 2%;
        width: 15%;
        height: 10%;
        z-index: 99;
      }
      .to-the-right {
        bottom: 24rem;
        right: 2%;
        width: 15%;
        height: 10%;
        z-index: 99;
      }
      .recomendations{
        height:12.7rem;
      }      
    }