.book {
  width: 20em;
  height: 22em;
  position: relative;
  transition-duration: 1s;
  perspective: 1500;
  display: flex;
  justify-content: center;
}
input {
  display: none;
}
.cover,
.back-cover {
  background-color: #dc4d89;
  width: 100%;
  height: 100%;
  border-radius: 0 15px 15px 0;
  box-shadow: 0 0 5px rgb(142, 142, 142);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center left;
}
.cover {
  position: absolute;
  z-index: 4;
  transition: transform 1s;
}
.cover label {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.back-cover {
  position: relative;
  z-index: -1;
}
.page {
  position: absolute;
  background-color: #ffe2ef;
  width: 18em;
  height: 21em;
  border-radius: 0 15px 15px 0;
  margin-top: 6px;
  margin-right: 30px;
  transform-origin: left;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition-duration: 1.5s;
}
.page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}
.front-page {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  box-sizing: border-box;
  padding: 1rem;
}

.back-page {
  transform: rotateY(180deg);
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  z-index: 99;
}
.next,
.prev {
  position: absolute;
  bottom: 1em;
  cursor: pointer;
}
.next {
  right: 1em;
}
.prev {
  left: 1em;
}
#page1 {
  z-index: 3;
}
#page2 {
  z-index: 2;
}
#page3 {
  z-index: 1;
}
#checkbox-cover:checked ~ .book {
  transform: translateX(200px);
}
#checkbox-cover:checked ~ .book .cover {
  transition: transform 1.5s, z-index 0.5s 0.5s;
  transform: rotateY(-180deg);
  z-index: 1;
}
#checkbox-cover:checked ~ .book .page {
  box-shadow: 0 0 3px rgb(99, 98, 98);
}
#checkbox-page1:checked ~ .book #page1 {
  transform: rotateY(-180deg);
  z-index: 2;
}
#checkbox-page2:checked ~ .book #page2 {
  transform: rotateY(-180deg);
  z-index: 3;
}