body {
  background-image: url(https://file.garden/ZFj9tPVXdRSd8e0M/guu/50154.png);
}


@font-face {
  src: url(https://file.garden/ZFj9tPVXdRSd8e0M/guu/AveriaSerifLibre-Regular.ttf);
  font-family: averia;
}

.text-container {
  background: none;
  position: relative;
  margin: auto;
  overflow: hidden;
  height: 679px;
}

.text {
  width: 579px;
  height: 579px;
  background-image: url(https://i.postimg.cc/9Q2Q0RYz/bg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  margin: auto;
}

.book {

  background-image: url(https://file.garden/ZFj9tPVXdRSd8e0M/guu/Vintage.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 875px;
  height: 685px;
  margin: auto;
  padding: 1px;
}

.text1 {
  width: 320px;
  height: 580px;
  overflow: auto;
  margin-top: 70px;
  margin-left: 60px;
  color: black;
  font-family: averia;
  font-size: 15px;
}

.text2 {
  width: 370px;
  height: 565px;
  overflow: auto;
  margin-top: -580px;
  margin-left: 465px;
  color: black;
  font-family: averia;
  font-size: 15px;
}

.navbar {
  display: flex;
  flex-direction: row;
  background: none;
  width: 700px;
  height: 70px;
  margin: auto;
  margin-top: 15px;
  padding: 1px;
}

.previous {
  background-image: url(https://panopticon.cc/project_stuff/last_page.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 140px;
  height: 70px;
  margin: auto;
  transition: transform .3s;
}

.previous:hover {
  transform: scale(1.1);
}

.toc {
  background-image: url(https://panopticon.cc/project_stuff/toc.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 210px;
  height: 72px;
  margin: auto;
  transition: transform .3s;

}

.toc:hover {
  transform: scale(1.1);
}


.next {
  background-image: url(https://panopticon.cc/project_stuff/next_page.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 140px;
  height: 70px;
  margin: auto;
  transition: transform .3s;

}

.next:hover {
  transform: scale(1.1);
}


.blank {
  background-image: none;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 140px;
  height: 70px;
  margin: auto;

}

.blank2 {
  background-image: none;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 140px;
  height: 20px;
  margin: auto;

}

.pagenumber0 {
  height: 10px;
  margin-top: -10px;
  margin-left: 15px;
  color: black;
  font-family: averia;
  font-size: 15px;
  position: absolute;
  transform: translate(255%, 670%);
}

.pagenumber1 {
  height: 10px;
  margin-top: -10px;
  margin-left: 15px;
  color: black;
  font-family: averia;
  font-size: 15px;
  position: absolute;
  transform: translate(85%, 1190%)
}

.pagenumber2 {
  height: 10px;
  margin-top: -10px;
  margin-left: 15px;
  color: black;
  font-family: averia;
  font-size: 15px;
  position: absolute;
  transform: translate(65%, 2080%)
}

.pagenumber3 {
  height: 10px;
  margin-top: -10px;
  margin-left: 15px;
  color: black;
  font-family: averia;
  font-size: 15px;
  position: absolute;
  transform: translate(80%, 2910%)
}

.pagenumber4 {
  height: 10px;
  margin-top: -10px;
  margin-left: 15px;
  color: black;
  font-family: averia;
  font-size: 15px;
  position: absolute;
  transform: translate(45%, 3810%)
}

.pagenumber5 {
  height: 10px;
  margin-top: -10px;
  margin-left: 15px;
  color: black;
  font-family: averia;
  font-size: 15px;
  position: absolute;
  transform: translate(45%, 4660%)
}

.pagenumber6 {
  height: 10px;
  margin-top: -10px;
  margin-left: 15px;
  color: black;
  font-family: averia;
  font-size: 15px;
  position: absolute;
  transform: translate(40%, 5300%)
}

.pagenumber7 {
  height: 10px;
  margin-top: -10px;
  margin-left: 15px;
  color: black;
  font-family: averia;
  font-size: 15px;
  position: absolute;
  transform: translate(55%, 6000%)
}

.pagenumber8 {
  height: 12px;
  margin-top: -10px;
  margin-left: 15px;
  color: black;
  font-family: averia;
  font-size: 15px;
  position: absolute;
  transform: translate(900%, -4880%)
}

.pagenumber9 {
  height: 12px;
  margin-top: -10px;
  margin-left: 15px;
  color: black;
  font-family: averia;
  font-size: 15px;
  position: absolute;
  transform: translate(1050%, -4160%)
}

.pagenumber10 {
  height: 12px;
  margin-top: -10px;
  margin-left: 15px;
  color: black;
  font-family: averia;
  font-size: 15px;
  position: absolute;
  transform: translate(780%, -3660%)
}

.pagenumber11 {
  height: 12px;
  margin-top: -10px;
  margin-left: 15px;
  color: black;
  font-family: averia;
  font-size: 15px;
  position: absolute;
  transform: translate(805%, -2950%)
}

.pagenumber12 {
  height: 12px;
  margin-top: -10px;
  margin-left: 15px;
  color: black;
  font-family: averia;
  font-size: 15px;
  position: absolute;
  transform: translate(650%, -2250%)
}

.pagenumber13 {
  height: 12px;
  margin-top: -10px;
  margin-left: 15px;
  color: black;
  font-family: averia;
  font-size: 15px;
  position: absolute;
  transform: translate(520%, -1580%)
}

.tocthings {
  display: block;
  height: 80;
  font-size: 22px;
  width: 100%;
  margin: auto;
  text-align: center;
}