/* Light mode */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: hsl(20, 43%, 93%); /* Light background color */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1s ease-out, visibility 0.5s ease-out;
  opacity: 1;
  visibility: visible;
  z-index: 9999; /* Ensure the preloader is above all other content */
}

/* Dark mode */
.dark-mode #preloader {
  background: #1E1C1C; /* Dark background color */
}

/* When hidden, preloader transitions out */
#preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Hide scrollbar */
/* body {
  overflow: hidden;
} */

.loader {
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-wrapper {
  width: 150px;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.book {
  width: 100%;
  height: auto;
  filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.137));
  border: 0;
}
.book-wrapper .book-page {
  width: 50%;
  height: auto;
  position: absolute;
  animation: paging 0.35s linear infinite;
  transform-origin: left;
  bottom: 20px;
}
@keyframes paging {
  0% {
      transform: rotateY(0deg) skewY(0deg);
  }
  50% {
      transform: rotateY(90deg) skewY(-20deg);
  }
  100% {
      transform: rotateY(180deg) skewY(0deg);
  }
}
