libro1.css

*{
  margin: 0;
  padding: 0;
}
body{
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  background-color: rgba(80, 34, 6, 0.81);
}
.fondo{
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.25;
    z-index: -1;
  }
  .fonde{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}
.indc{
    width: 87%;
    height: 90vh;
    background-color: rgba(80, 34, 6, 0.94);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    border: 2px solid #361602;
    position: absolute;
    top: 3%;
    left: 7%;
    z-index: 3;
    box-shadow: 1px 3px 7px;
    font-size: 1.27em;
    color: white;
  }
  .indc li a{
    cursor: pointer;
    margin: 12.7px;
    color: white;
    text-decoration: none;
  }
  .indc li:hover{
    color: grey;
  }
  .indc li a:hover{
    color: grey;
  }
  #inici{
    background-color: grey;
    padding: 4px;
    border-radius: 120px;
    position: absolute;
    left: 15px;
    bottom: 3%;
    cursor: pointer;
    box-shadow: 1px 3px 7px;
    z-index: 4;
  }
#lengua{
    display: none;
    width: 14%;
    background-color: rgba(221, 102, 17, 0.81);
    cursor: pointer;
    text-align: center;
    position: relative;
    margin: auto;
    border-radius: 17px;
    top: 1.3vh;
    z-index: 4;
}
#lengua span{
    margin: 7px;
}
#lengua span:hover{
    color: white;
}
.caja{
    width: 85%;
    margin: auto;
    display: flex;
    order: 2;
    flex-direction: row;
  }
  .darmod{
    width: 6.7%;
    height: 33px;
    background-color: antiquewhite;
    position: fixed;
    display: flex;
    top: 7%;
    cursor: pointer;
    border-radius: 15px;
    align-items: center;
    text-align: center;
  }
  .darmod2{
    display: flex;
    width: 6.7%;
    height: 37px;
    background-color: antiquewhite;
    position: fixed;
    text-align: center;
    cursor: pointer;
    bottom: 3%;
    border-radius: 15px;
  }
  #conte{
    width: 80%;
    position: relative;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 21px;
    background-color: #FFFFCC;
    padding: 17px;
    border: 1px solid black;
    border-radius: 17px;
    box-shadow: 3px 3px 9px 5px;
  }
  #conte p{
    text-indent: 21px;
    font-size: 19px;
    margin-top: 7px;
    text-align: justify;
    font-family: 'Zen Antique Soft', serif;
  }
  #conte h1, h2{
    text-align: center;
  }
  .apart{
    text-align: center !important;
  }
  .portada{
    width: 40%;
    height: 93%;
    display: none;
    margin: 2%;
    background-color: #FFFFCC;
    position: absolute;
    left: 9%;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #titulo{
  color: darkgoldenrod;
  font-size: 3em;
  }
  #autor{
    color: darkgoldenrod;
    font-size: 1.3em;
  }
  .pagy{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  #fondo2{
    display: block;
    margin: 1%;
    border-radius: 7%;
    width: 33%;
    box-shadow: 3px 3px 7px;
  }
  .abrir{
    display: flex;
    width: 12%;
    height: 7vh;
    background-color: bisque;
    justify-content: center;
    align-items: center;
    border-radius: 25%;
    cursor: pointer;
    margin-left: 3%;
    box-shadow: 3px 3px 9px 5px;
  }
  @media only screen and (max-width: 600px) {
    body {
      height: 100%;
  width: 100%;
  overflow-x: hidden;
  background-color: rgba(80, 34, 6, 0.81);}
    .fondo{
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0.7;
        z-index: -1;
      }
      #fondo2{
        display: block;
        margin: 1%;
        border-radius: 7%;
        min-width: 80%;
        box-shadow: 3px 3px 7px;
      }
      .abrir{
        position: absolute;
        display: flex;
        width: 22%;
        height: 7vh;
        background-color: bisque;
        text-align: center;
        border-radius: 25%;
        cursor: pointer;
        margin-left: 3%;
        box-shadow: 3px 3px 9px 5px;
      }
      .darmod{
        width: 15%;
        height: 33px;
        left: 0;
        top: 7%;
        
      }
      .darmod2{
        width: 15%;
        height: 37px;
        left: 0;;
        bottom: 3%;
        border-radius: 15px;
      }
      #conte{
        left: 3%;
      }
      .indc{
        height: 75vh;
        top: 7%;
        color: white;
        left: 0%;
      }
    .indc ol li a{
    cursor: pointer;
    margin: 0;
    color: white;
    text-decoration: none;
  }