.error{
  font-family: 'avenir';
  font-size: 6vw;
  opacity: 2.5%;
}

.error:hover{
  opacity: 100%;
}

.errorbox{
  width: 1500px;
  position: absolute;
  left: 5%;
  top: 5%;

}

span {
    border-bottom: 1px solid black;
    color: rgba(255, 255, 255, 0);
    transition: color 0.25s;
    cursor: pointer;
    user-select: none;
}

span:hover {
    color: rgba(0, 0, 0, 1);
}


/* Very large viewports */
@media screen and (min-width: 1921px)   {

  .readingBox{
    width: 45%;
    height: 93%;
    position: absolute;
    left: 3.5%;
    top: 3.5%;
    overflow: scroll;
    white-space: pre-line;
    box-shadow:
    0 0px 22.2px rgba(0, 0, 0, 0.008),
    0 0px 21.6px rgba(0, 0, 0, 0.012),
    0 0px 19.2px rgba(0, 0, 0, 0.015),
    0 0px 19.5px rgba(0, 0, 0, 0.018),
    0 0px 28.4px rgba(0, 0, 0, 0.022),
    0 0px 80px rgba(0, 0, 0, 0.03);
  }

  .infoBox{
    width: 36.5%;
    height: 39%;
    position: absolute;
    right: 3.5%;
    top: 3.5%;
    box-shadow:
    0 0px 22.2px rgba(0, 0, 0, 0.008),
    0 0px 21.6px rgba(0, 0, 0, 0.012),
    0 0px 19.2px rgba(0, 0, 0, 0.015),
    0 0px 19.5px rgba(0, 0, 0, 0.018),
    0 0px 28.4px rgba(0, 0, 0, 0.022),
    0 0px 80px rgba(0, 0, 0, 0.03);
  }

  p.chapter{
    font-family: 'avenir';
    font-size: 1.2vw;
    position: relative;
    width: 90%;
    left: 5%;
  }

  p.chapter:hover{
    /* opacity: 100%; */
  }

  .info{
    font-family: 'avenir';
    font-size: 2vw;
    text-align: right;
    position: relative;
    right: 35px;
    line-height: 15px;
    /* opacity: 0%; */
  }

  .info:hover{
    /* opacity: 100%; */
  }

  #title{
    font-size: 3.5vw;
  }

  #author{
    font-size: 1.2vw;
    top: 75px;
  }


}

/* Viewports between 768 and 1280 px */
/* normal view */
@media screen and (min-width: 1250px) and (max-width: 1440px)   {


  .readingBox{
    width: 600px;
    height: 750px;
    position: absolute;
    left: 35px;
    top: 35px;
    overflow: scroll;
    white-space: pre-line;
    box-shadow:
    0 0px 22.2px rgba(0, 0, 0, 0.008),
    0 0px 21.6px rgba(0, 0, 0, 0.012),
    0 0px 19.2px rgba(0, 0, 0, 0.015),
    0 0px 19.5px rgba(0, 0, 0, 0.018),
    0 0px 28.4px rgba(0, 0, 0, 0.022),
    0 0px 80px rgba(0, 0, 0, 0.03);
  }

  .infoBox{
    width: 550px;
    height: 300px;
    position: absolute;
    right: 35px;
    top: 35px;
    box-shadow:
    0 0px 22.2px rgba(0, 0, 0, 0.008),
    0 0px 21.6px rgba(0, 0, 0, 0.012),
    0 0px 19.2px rgba(0, 0, 0, 0.015),
    0 0px 19.5px rgba(0, 0, 0, 0.018),
    0 0px 28.4px rgba(0, 0, 0, 0.022),
    0 0px 80px rgba(0, 0, 0, 0.03);
  }

  p.chapter{
    font-family: 'avenir';
    font-size: 13pt;
    position: relative;
    width: 530px;
    left: 35px;
    opacity: 0%;
  }

  p.chapter:hover{
    opacity: 100%;
  }

  .info{
    font-family: 'avenir';
    font-size: 25pt;
    text-align: right;
    position: relative;
    right: 35px;
    line-height: 15px;
    opacity: 0%;
  }

  .info:hover{
    opacity: 100%;
  }

  #title{
    font-size: 40pt;
  }

  #author{
    font-size: 13pt;
    top: 75px;
  }



}

/* Viewports smaller than 768 px */
@media screen and (max-width: 1250px) {
  .readingBox{
    width: 90%;
    height: 60%;
    position: absolute;
    top: 35%;
    overflow: scroll;
    white-space: pre-line;
    box-shadow:
    0 0px 22.2px rgba(0, 0, 0, 0.008),
    0 0px 21.6px rgba(0, 0, 0, 0.012),
    0 0px 19.2px rgba(0, 0, 0, 0.015),
    0 0px 19.5px rgba(0, 0, 0, 0.018),
    0 0px 28.4px rgba(0, 0, 0, 0.022),
    0 0px 80px rgba(0, 0, 0, 0.03);
  }

  .infoBox{
    width: 90%;
    height: 30%;
    position: absolute;
    box-shadow:
    0 0px 22.2px rgba(0, 0, 0, 0.008),
    0 0px 21.6px rgba(0, 0, 0, 0.012),
    0 0px 19.2px rgba(0, 0, 0, 0.015),
    0 0px 19.5px rgba(0, 0, 0, 0.018),
    0 0px 28.4px rgba(0, 0, 0, 0.022),
    0 0px 80px rgba(0, 0, 0, 0.03);
  }

  p.chapter{
    font-family: 'avenir';
    font-size: 13pt;
    position: relative;
    width: 80%;
    left: 9%;
    opacity: 0%;
  }

  p.chapter:hover{
    opacity: 100%;
  }

  .info{
    font-family: 'avenir';
    font-size: 25pt;
    text-align: right;
    position: relative;
    right: 35px;
    line-height: 15px;
    opacity: 0%;
    transition: color 0.25s;
  }

  .info:hover{
    opacity: 100%;
  }

  #title{
    font-size: 40pt;
  }

  #author{
    font-size: 13pt;
  }

}