.preloader {
  position: fixed;
  inset: 0;
  background-color: #fff;
  display: grid;
  place-items: center;
}

.book {
  width: 60px;
  height: 80px;
  position: fixed;
  top: 53%;
  left: 50.5%;
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  transform-origin: left;
  box-shadow: 2px 4px 8px rgba(0,0,0,0.3);
  animation: flip 0.8s infinite ease-in-out;
}

.page:nth-child(1) {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  animation-delay: 0s;
}

.page:nth-child(2) {
  background: linear-gradient(to right, #6a11cb, #2575fc);
  animation-delay: 0.5s;
}

.page:nth-child(3) {
  background: linear-gradient(to right, #00b4db, #0083b0);
  animation-delay: 1s;
}

@keyframes flip {
  0% { transform: rotateY(0deg); opacity: 1; }
  25% { transform: rotateY(-45deg); opacity: 0.9; }
  50% { transform: rotateY(-90deg); opacity: 0.8; }
  75% { transform: rotateY(-135deg); opacity: 0.7; }
  100% { transform: rotateY(-180deg); opacity: 0.6; }
}