@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    align-items: center;
    background-image: url("../bookimage/banner3.jpg");
}

input {
    display: none;
}

img {
    width: 100%;
    height: 100%;
}

.book {
    display: flex;
}

#cover {
   width: 600px;
  height: 700px;
}

.flip-book {
   width: 600px;
  height: 700px;
    position: relative;
    perspective: 1500px;
}

.flip {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: .5s;
    color: #000;
}

p {
    font-size: 14px;
    line-height: 24px;
}

.front {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fafafa;
    box-sizing: border-box;
   /* padding: 0 13px;*/
    /* box-shadow: inset 20px 0 50px r; */
}

.back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    background-color: #000;
}

.next-btn {
    position: absolute;
    bottom: 13px;
    right: 13px;
    cursor: pointer;
    color: #fff;
}

.back-btn {
    position: absolute;
    bottom: 13px;
    left: 13px;
    cursor: pointer;
    color: #fff;
}

#p1 {
    z-index: 38;
}
#p2 {
    z-index: 37;
}
#p3 {
    z-index: 36;
}

#p4 {
    z-index: 35;
}
#p5 {
    z-index: 34;
}
#p6 {
    z-index: 33;
}
#p7 {
    z-index: 32;
}

#p8 {
    z-index: 31;
}
#p9 {
    z-index: 30;
}
#p10 {
    z-index: 29;
}
#p11 {
    z-index: 28;
}

#p12 {
    z-index: 27;
}
#p13 {
    z-index: 26;
}
#p14 {
    z-index: 25;
}
#p15 {
    z-index: 24;
}

#p16 {
    z-index: 23;
}
#p17 {
    z-index: 22;
}
#p18 {
    z-index: 21;
}
#p19 {
    z-index: 20;
}

#p20 {
    z-index: 19;
}
#p21 {
    z-index: 18;
}
#p22 {
    z-index: 17;
}
#p23 {
    z-index: 16;
}

#p24 {
    z-index: 15;
}
#p25 {
    z-index: 14;
}
#p26 {
    z-index: 13;
}
#p27 {
    z-index: 12;
}

#p28 {
    z-index: 11;
}
#p29 {
    z-index: 10;
}
#p30 {
    z-index: 9;
}
#p31 {
    z-index: 8;
}

#p32 {
    z-index: 7;
}
#p33 {
    z-index: 6;
}
#p34 {
    z-index: 5;
}
#p35 {
    z-index: 4;
}
#p36 {
    z-index: 3;
}
#p37 {
    z-index: 2;
}
#p38 {
    z-index: 1;
}


#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;
}
#c6:checked ~ .flip-book #p6 {
    transform: rotateY(-180deg);
    z-index: 6;
}
#c7:checked ~ .flip-book #p7 {
    transform: rotateY(-180deg);
    z-index: 7;
}
#c8:checked ~ .flip-book #p8 {
    transform: rotateY(-180deg);
    z-index: 8;
}
#c9:checked ~ .flip-book #p9 {
    transform: rotateY(-180deg);
    z-index: 9;
}
#c10:checked ~ .flip-book #p10 {
    transform: rotateY(-180deg);
    z-index: 10;
}
#c11:checked ~ .flip-book #p11 {
    transform: rotateY(-180deg);
    z-index: 11;
}
#c12:checked ~ .flip-book #p12 {
    transform: rotateY(-180deg);
    z-index: 12;
}
#c13:checked ~ .flip-book #p13 {
    transform: rotateY(-180deg);
    z-index: 13;
}
#c14:checked ~ .flip-book #p14 {
    transform: rotateY(-180deg);
    z-index: 14;
}
#c15:checked ~ .flip-book #p15 {
    transform: rotateY(-180deg);
    z-index: 15;
}
#c16:checked ~ .flip-book #p16 {
    transform: rotateY(-180deg);
    z-index: 16;
}
#c17:checked ~ .flip-book #p17 {
    transform: rotateY(-180deg);
    z-index: 17;
}
#c18:checked ~ .flip-book #p18 {
    transform: rotateY(-180deg);
    z-index: 18;
}
#c19:checked ~ .flip-book #p19 {
    transform: rotateY(-180deg);
    z-index: 19;
}
#c20:checked ~ .flip-book #p20 {
    transform: rotateY(-180deg);
    z-index: 20;
}
#c21:checked ~ .flip-book #p21 {
    transform: rotateY(-180deg);
    z-index: 21;
}
#c22:checked ~ .flip-book #p22 {
    transform: rotateY(-180deg);
    z-index: 22;
}
#c23:checked ~ .flip-book #p23 {
    transform: rotateY(-180deg);
    z-index: 23;
}
#c24:checked ~ .flip-book #p24 {
    transform: rotateY(-180deg);
    z-index: 24;
}
#c25:checked ~ .flip-book #p25 {
    transform: rotateY(-180deg);
    z-index: 25;
}
#c26:checked ~ .flip-book #p26 {
    transform: rotateY(-180deg);
    z-index: 26;
}
#c27:checked ~ .flip-book #p27 {
    transform: rotateY(-180deg);
    z-index: 27;
}
#c28:checked ~ .flip-book #p28 {
    transform: rotateY(-180deg);
    z-index: 28;
}
#c29:checked ~ .flip-book #p29 {
    transform: rotateY(-180deg);
    z-index: 29;
}
#c30:checked ~ .flip-book #p30 {
    transform: rotateY(-180deg);
    z-index: 30;
}
#c31:checked ~ .flip-book #p31 {
    transform: rotateY(-180deg);
    z-index: 31;
}
#c32:checked ~ .flip-book #p32 {
    transform: rotateY(-180deg);
    z-index: 32;
}
#c33:checked ~ .flip-book #p33 {
    transform: rotateY(-180deg);
    z-index: 33;
}
#c34:checked ~ .flip-book #p34 {
    transform: rotateY(-180deg);
    z-index: 34;
}
#c35:checked ~ .flip-book #p35 {
    transform: rotateY(-180deg);
    z-index: 35;
}
#c36:checked ~ .flip-book #p36 {
    transform: rotateY(-180deg);
    z-index: 36;
}
#c37:checked ~ .flip-book #p37 {
    transform: rotateY(-180deg);
    z-index: 37;
}
#c38:checked ~ .flip-book #p38 {
    transform: rotateY(-180deg);
    z-index: 38;
}