@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: linear-gradient(90deg , #fff 50% , #4a1010 50% );
    direction: rtl; /* Set RTL direction */
}

input {
    display: none;
}

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

.book {
    display: flex;
}

#cover {
    width: 350px;
    height: 400px;
}

.flip-book {
    width: 350px;
    height: 400px;
    position: relative;
    perspective: 1500px;
}

.flip {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: right; /* Flip from right side */
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: 1.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;
}

.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;
    left: 13px; /* Move next button to the left */
    cursor: pointer;
    color: #000;
}

.back-btn {
    position: absolute;
    bottom: 13px;
    right: 13px; /* Move back button to the right */
    cursor: pointer;
    color: #fff;
}

/* Z-index values for each page */
#p1 { z-index: 24; }
#p2 { z-index: 23; }
#p3 { z-index: 22; }
#p4 { z-index: 21; }
#p5 { z-index: 20; }
#p6 { z-index: 19; }
#p7 { z-index: 18; }
#p8 { z-index: 17; }
#p9 { z-index: 16; }
#p10 { z-index: 15; }
#p11 { z-index: 14; }
#p12 { z-index: 13; }
#p13 { z-index: 12; }
#p14 { z-index: 11; }
#p15 { z-index: 10; }
#p16 { z-index: 9; }
#p17 { z-index: 8; }
#p18 { z-index: 7; }
#p19 { z-index: 6; }
#p20 { z-index: 5; }
#p21 { z-index: 4; }
#p22 { z-index: 3; }
#p23 { z-index: 2; }
#p24 { z-index: 1; }

/* Flip animations (reverse direction) */
#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; }