@font-face {
  font-family: 'Daedra';
  src: url('../files/font/Daedra.woff2') format('woff2');
}

body{
  font-family:Arial;
  overflow-x:hidden;
  padding:0px;
  margin:0px;
  background-color:black;
  background-image:url("../files/img/bg/oblivion_bg_3.jpg");
  background-repeat:no-repeat;
  height: 100vh;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  overflow:hidden;
  
  display:flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;
}

body:before {
  content: " ";
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  background: rgb(2,0,36);
  background: -moz-linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.8141631652661064) 0%, rgba(0,212,255,0) 33%);
  background: -webkit-linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.8141631652661064) 0%, rgba(0,212,255,0) 33%);
  background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.8141631652661064) 0%, rgba(0,212,255,0) 33%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#00d4ff",GradientType=1);
}

.daedra-font {
  font-family: 'Daedra';	
}

#title-area {
  xheight:20px;
  width:100vw;
  padding:5px;
  background-color:rgba(0,0,0,0.8);
  text-align:center;
  box-shadow:0px 5px 5px rgba(0,0,0,0.5);

  xborder:1px solid grey;
  display:flex;
  align-items: center;
  justify-content: center;

}

#page-title {
  font-family: 'Noto Serif', serif;
  font-size:25px;
  color:white;
  text-shadow: 2px 2px 2px black;
  font-family: 'Roboto Condensed', sans-serif;
  display:inline-block;
}

#btn-generate {
  width:130px;
  height:30px;

  font-family: 'Noto Serif', serif;
  background-color:#453121;
  margin-left:20px;
  color:white;
  cursor:pointer;

}

#btn-generate:active {
  color:grey;
}

#book-title-area {
  xborder:1px solid grey;
  width:100vw;
  height:15%;
  text-align:center;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#book-title {
  font-family: 'Noto Serif', serif;
  font-size:30px;
  letter-spacing:3px;  
  font-weight: boldx;

}

#book-title-daedric {
  font-family: 'Daedra';	
  font-size:28px;
  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */

}

#book-area {
  xborder:1px solid grey;
  xmargin:auto auto;
  width:100%;
  xmax-width:898px;
  height:80%;
  xmax-height:662px;
  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
  display:flex;
  align-items: start;
  justify-content: center;
}

#book-image {
  position:relative;
  background-image:url("../files/img/oblivion_book.png");
  background-repeat:no-repeat;
  background-size: cover;
  aspect-ratio: 1.34/1;
  xwidth:50%;
  height:90%;
  xbackground-position: center;
  xwidth:100%;
  xmax-width:898px;
  xheight:100%;
  xmax-height:662px;

}

.page {
  position:absolute;
  overflow:hidden;
  width:40%;
  height:90%;
  top:5%;
  font-size: 1.8em;
  line-height:120%;
  font-family: 'Daedra';	
  font-weight:600; 
  filter:blur(0.5px);
  color:#453121;
}

#left.page {
  left:5%;
}

#right.page {
  left:55%;
}

@media screen and (max-width:898px) { /* when the book image starts to scale to smaller width */
  .page {
    font-size: 3.9vw;
    line-height:4.4vw;
  }

  #book-title {
    font-size:6vw;
  }

  #book-title-daedric {
    font-size:7vw;
  }
}