#loadingScreen {
  transition: opacity 0.7s;
  opacity: 1;
  pointer-events: auto;
  position: fixed;
  z-index: 99999;
  inset: 0;
  left: 0;
  right: 0;
  background: #000;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#loadingScreen.hide {
  opacity: 0;
  pointer-events: none;
}
.w-full { width: 100%; }
.h-full { height: 100%; }

.book {
  position: relative;
  width: 400px;
  height: 600px;
  transition: 1s;
  transform-style: preserve-3d;
}

.book.flip {
  transform: rotateY(180deg);
}

.rotateLeft {
  transform: rotate3d(0, 1, 0, 45deg)
}

.rotateRight {
  transform: rotate3d(0, 1, 0, -45deg);
}

.front-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("https://novelkaisar.com/wp-content/themes/kaisar/assets/front-cover.png");
  background-size: 100% 100%;
}

.second-half {
  left: 50%;
  background-image: url("https://novelkaisar.com/wp-content/themes/kaisar/assets/front-cover-half-2.jpg");
}

.cover-left {
  content: "";
  position: absolute;
  background-image: url("https://novelkaisar.com/wp-content/themes/kaisar/assets/middle-cover.png");
  width: 90px;
  height: 100%;
  background-size: 100% 100%;
  transform-origin: left;
  transform: rotateY(90deg);
}

.cover-right {
  right: 0;
  background-image: url("https://novelkaisar.com/wp-content/themes/kaisar/assets/middle-cover-2.jpg");
  transform-origin: right;
  transform: rotateY(-90deg);
}

.back-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("https://novelkaisar.com/wp-content/themes/kaisar/assets/back-cover.png");
  background-size: 100% 100%;
  transform: rotateY(180deg) translateZ(65px);
}