html {cursor: url('Cursor.png'), auto;
}
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: justify;
font-family:'Times New Roman', 'Times New Roman', Times, serif;
background: #FAC2D2;
}


flex-container {
  display: flex;
  align-items: center;
  gap: 50px;
 }
img {
  float: left;
  width: 150px;
  height: 225px;
  margin-left: 15px;
}

p{
  width: 180px;
  text-align: justify;
  text-align-last: left;
  text-indent: 25px;
  margin-left: 185px;
}

input {
display: none;
}

h1 {
margin-top: 175px ;
margin-left: 60px;
font-size: 26px;
text-align: center;
color: #CE4760;
}
h2 {
text-align: center;
background-color: #FAC2D2;
margin-top: 30px;
font-size: 22px;
}
.book {
display: flex;
}
#cover {
width: 400px;
height: 525px;
}
.flip-book {
width: 400px;
height: 525px;
position: relative;
perspective: 1500px;
}
.flip {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: center left;
transform-style: preserve-3d;
transition: 0.5s;
color: #000;

}
.front {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #fff;
box-sizing: border-box;
padding: 0 13px;
}

.back {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
transform: rotateY(180deg);
backface-visibility: hidden;
background-color: #fff;
}
.next-btn {
position: absolute;
border: 2px solid #CE4760;
border-radius: 10px;
padding: 4px;
bottom: 13px;
right: 13px;
cursor: pointer;
color: #CE4760;
background-color: #FAC2D2;
}
.back-btn {
position: absolute;
border: 2px solid #CE4760;
border-radius: 10px;
padding: 4px;
bottom: 13px;
right: 13px;
cursor: pointer;
color: #CE4760;
background-color: #FAC2D2;
}
#p1 {
z-index: 5;
margin: 5px;
}
#p2 {
z-index: 4;
margin: 5px;
}
#p3 {
z-index: 3;
margin: 5px;
}
#p4 {
z-index: 2;
margin: 5px;
}
#p5 {
z-index: 1;
margin: 5px;
}
#c1:checked ~ .flip-book #p1 {
transform: rotateY(-180deg);
z-index: 1;
}
#c2:checked ~ .flip-book #p2 {
transform: rotateY(-180deg);
z-index: 2;
}
#c3:checked ~ .flip-book #p3 {
transform: rotateY(-180deg);
z-index: 3;
}
#c4:checked ~ .flip-book #p4 {
transform: rotateY(-180deg);
z-index: 4;
}
#c5:checked ~ .flip-book #p5 {
transform: rotateY(-180deg);
z-index: 5;
}

#c3:checked ~ .flip-book #p1 {
display: none;
}
#c4:checked ~ .flip-book #p2 {
display: none;
}
#c5:checked ~ .flip-book #p3 {
display: none;
}


.bb{
  position: absolute;
  z-index: -1;
  width: 800px;
  height: 525px;
 pointer-events: none;

}
#c1:checked ~ .bb {
border: 5px solid #CE4760;
background-color: white;
}
#c2:checked ~ .bb {
border: 5px solid #CE4760;
}
#c3:checked ~ .bb {
border: 5px solid #CE4760;
}
#c4:checked ~ .bb {
border: 5px solid #CE4760;
}
#c5:checked ~ .bb {
border: none;
background-color: transparent;
}