@font-face {
  font-family: "Rainstorm";
  src: url("../font/Rain-Strom.otf") format("OpenType");
}

html,
body {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../asset/background-book.jpg");
  background-size: cover;
}
.container {
  height: max-content;
  width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  z-index: 1;
  margin-left: 110px;
}

.container {
  width: 100vw; /* Membatasi lebar container */
  height: 90vh; /* Membatasi tinggi container */
  display: flex;
  justify-content: center;
  align-items: center;
}


h1 {
  margin: 0;
}

.front-page {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  cursor: pointer;
  z-index:1;
}

.back-page {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  backface-visibility: hidden;
  cursor: pointer;
}

.book {
  position: relative;
  -webkit-perspective: 4000px;
  -moz-perspective: 4000px;
  perspective: 4000px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  filter: drop-shadow(0 0px 1px black);
  -webkit-filter: drop-shadow(0 0px 1px black);
}
.book .pages,
.book .pages > div {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.book .pages {
  width: 100%;
  height: 98%;
  top: 1%;
  left: 3%;
  z-index: 10;
}
.book .pages > div {
  width: 100%;
  height: 100%;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  transition-timing-function: ease;
  background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  box-shadow:
    inset 0px -1px 2px rgba(50, 50, 50, 0.1),
    inset -1px 0px 1px rgba(150, 150, 150, 0.2);
  border-radius: 0px 5px 5px 0px;
  -webkit-transition-duration: 1s;
}
.book .pages > div:hover {
  box-shadow:
    inset 1px 0px 2px rgba(50, 50, 50, 0.1),
    inset -3px 1px 1px rgba(150, 150, 150, 0.2);
}
.book .pages > div label {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-align: center;
  vertical-align: middel;
}

.scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
  border-radius: 9999px;
}

.scrollbar::-webkit-scrollbar {
  width: 10px;
	background-color: #F5F5F5;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #F90;	
	background-image: -webkit-linear-gradient(90deg,
	                                          rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent)
}