body {
background-color: rgb(14, 28, 52);
}

@font-face {
    font-family: orbFont;
    src: url('Existence-Light.ttf');
}





#content {

  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  z-index: 1;

}

#frontPage {

  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  z-index: 1;

}

#readerPage1 {

  position: absolute;
  height: 55%;
  width: 60%;
  top: 40%;
  left: 15%;
  overflow: scroll;
  background-size: contain;
    background-color: rgb(219, 203, 171);
  background-repeat: no-repeat;
  display: none;
  z-index: 10;

}

#closeReaderPage1 {

  position: absolute;
  height: 5%;
  width: 2.5%;
  top: 2%;
  left: 95%;
  cursor: pointer;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 32px;

  color: rgb(14, 28, 52);


  background-repeat: no-repeat;
  display: block;
  z-index: 20;

}



#interface {

  position: absolute;
  height: 50%;
  width: 100%;
  top: 1.5%;
  left: 0%;
  background-size: contain;
  background-repeat: no-repeat;
  overflow: hidden;
  display: block;
  z-index: 0;

}

#frontArticleTitle {

  position: absolute;
  height: 10%;
  width: 30%;
  top: 42.5%;
  left: 40%;
  background-size: contain;
  background-repeat: no-repeat;
  color: rgb(219, 203, 171);
  text-align: left;
  cursor: pointer;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 32px;
  overflow: hidden;
  display: block;
  z-index: 5;

}

#frontArticleTease {

  position: absolute;
  height: 15%;
  width: 30%;
  top: 52.5%;
  left: 40%;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  color: rgb(219, 203, 171);
  text-align: left;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 18px;
  overflow: hidden;
  display: block;
  z-index: 5;

}



#frontLogo {

  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
  background-image: url("graphics/Logo.png");
  background-size: contain;
  background-repeat: no-repeat;

  display: block;
  z-index: 0;

}


#frontPic {

  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
  background-image: url("graphics/pic1.png");
  background-size: contain;
  background-repeat: no-repeat;

  display: block;
  z-index: 0;

}

#readerPic1 {

  position: absolute;
  height: 180%;
  width: 180%;
  top: -40%;
  left: 22%;
  background-image: url("graphics/pic1.png");
  background-size: contain;
  background-repeat: no-repeat;

  display: block;
  z-index: 0;

}

#readerArticleTitle1 {

  position: absolute;
  height: 20%;
  width: 50%;
  top: 2.5%;
  left: 2.5%;
  background-size: contain;
  background-repeat: no-repeat;

  text-align: left;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 32px;
  overflow: hidden;
  display: block;
  z-index: 0;

}

#readerArticle1 {

  position: absolute;
  height: 75%;
  width: 45%;
  top: 20%;
  left: 2.5%;
  background-size: contain;
  background-repeat: no-repeat;

  text-align: left;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 12px;
  overflow: scroll;
  display: block;

  z-index: 0;

}


.reader {

display: none;


}