@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, #fff4f4 50%, #4a1010 50%);*/
	background-color: #000;
}

input {
    display: none;
}

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

.book {
    display: flex;
}

#cover , .flip-book {
    width: 351px;
    height: 530px;
}

@media (max-width: 768px) {
    #cover , .flip-book {
        width: 200px;
        height: 400px; /* or adjust as needed */
    }
}

@media (max-width: 448px) {
    #cover , .flip-book {
        width: 100%;
        height: 400px; /* or adjust as needed */
    }
}

.flip-book {
    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;
    background: #000;
    padding: 10px;
    border-radius: 5px;
}

.back-btn {
    position: absolute;
    bottom: 13px;
    right: 13px;
    cursor: pointer;
    color: #fff;
    background: #000;
    padding: 10px;
    border-radius: 5px;
}

#p1 { z-index: 69; }
#p2 { z-index: 68; }
#p3 { z-index: 67; }
#p4 { z-index: 66; }
#p5 { z-index: 65; }
#p6 { z-index: 64; }
#p7 { z-index: 63; }
#p8 { z-index: 62; }
#p9 { z-index: 61; }
#p10 { z-index: 60; }
#p11 { z-index: 59; }
#p12 { z-index: 58; }
#p13 { z-index: 57; }
#p14 { z-index: 56; }
#p15 { z-index: 55; }
#p16 { z-index: 54; }
#p17 { z-index: 53; }
#p18 { z-index: 52; }
#p19 { z-index: 51; }
#p20 { z-index: 50; }
#p21 { z-index: 49; }
#p22 { z-index: 48; }
#p23 { z-index: 47; }
#p24 { z-index: 46; }
#p25 { z-index: 45; }
#p26 { z-index: 44; }
#p27 { z-index: 43; }
#p28 { z-index: 42; }
#p29 { z-index: 41; }
#p30 { z-index: 40; }
#p31 { z-index: 39; }
#p32 { z-index: 38; }
#p33 { z-index: 37; }
#p34 { z-index: 36; }
#p35 { z-index: 35; }
#p36 { z-index: 34; }
#p37 { z-index: 33; }
#p38 { z-index: 32; }
#p39 { z-index: 31; }
#p40 { z-index: 30; }
#p41 { z-index: 29; }
#p42 { z-index: 28; }
#p43 { z-index: 27; }
#p44 { z-index: 26; }
#p45 { z-index: 25; }
#p46 { z-index: 24; }
#p47 { z-index: 23; }
#p48 { z-index: 22; }
#p49 { z-index: 21; }
#p50 { z-index: 20; }
#p51 { z-index: 19; }
#p52 { z-index: 18; }
#p53 { z-index: 17; }
#p54 { z-index: 16; }
#p55 { z-index: 15; }
#p56 { z-index: 14; }
#p57 { z-index: 13; }
#p58 { z-index: 12; }
#p59 { z-index: 11; }
#p60 { z-index: 10; }
#p61 { z-index: 9; }
#p62 { z-index: 8; }
#p63 { z-index: 7; }
#p64 { z-index: 6; }
#p65 { z-index: 5; }
#p66 { z-index: 4; }
#p67 { z-index: 3; }
#p68 { z-index: 2; }
#p69 { 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; }
#c39:checked ~ .flip-book #p39 { transform: rotateY(-180deg); z-index: 39; }
#c40:checked ~ .flip-book #p40 { transform: rotateY(-180deg); z-index: 40; }
#c41:checked ~ .flip-book #p41 { transform: rotateY(-180deg); z-index: 41; }
#c42:checked ~ .flip-book #p42 { transform: rotateY(-180deg); z-index: 42; }
#c43:checked ~ .flip-book #p43 { transform: rotateY(-180deg); z-index: 43; }
#c44:checked ~ .flip-book #p44 { transform: rotateY(-180deg); z-index: 44; }
#c45:checked ~ .flip-book #p45 { transform: rotateY(-180deg); z-index: 45; }
#c46:checked ~ .flip-book #p46 { transform: rotateY(-180deg); z-index: 46; }
#c47:checked ~ .flip-book #p47 { transform: rotateY(-180deg); z-index: 47; }
#c48:checked ~ .flip-book #p48 { transform: rotateY(-180deg); z-index: 48; }
#c49:checked ~ .flip-book #p49 { transform: rotateY(-180deg); z-index: 49; }
#c50:checked ~ .flip-book #p50 { transform: rotateY(-180deg); z-index: 50; }
#c51:checked ~ .flip-book #p51 { transform: rotateY(-180deg); z-index: 51; }
#c52:checked ~ .flip-book #p52 { transform: rotateY(-180deg); z-index: 52; }
#c53:checked ~ .flip-book #p53 { transform: rotateY(-180deg); z-index: 53; }
#c54:checked ~ .flip-book #p54 { transform: rotateY(-180deg); z-index: 54; }
#c55:checked ~ .flip-book #p55 { transform: rotateY(-180deg); z-index: 55; }
#c56:checked ~ .flip-book #p56 { transform: rotateY(-180deg); z-index: 56; }
#c57:checked ~ .flip-book #p57 { transform: rotateY(-180deg); z-index: 57; }
#c58:checked ~ .flip-book #p58 { transform: rotateY(-180deg); z-index: 58; }
#c59:checked ~ .flip-book #p59 { transform: rotateY(-180deg); z-index: 59; }
#c60:checked ~ .flip-book #p60 { transform: rotateY(-180deg); z-index: 60; }
#c61:checked ~ .flip-book #p61 { transform: rotateY(-180deg); z-index: 61; }
#c62:checked ~ .flip-book #p62 { transform: rotateY(-180deg); z-index: 62; }
#c63:checked ~ .flip-book #p63 { transform: rotateY(-180deg); z-index: 63; }
#c64:checked ~ .flip-book #p64 { transform: rotateY(-180deg); z-index: 64; }
#c65:checked ~ .flip-book #p65 { transform: rotateY(-180deg); z-index: 65; }
#c66:checked ~ .flip-book #p66 { transform: rotateY(-180deg); z-index: 66; }
#c67:checked ~ .flip-book #p67 { transform: rotateY(-180deg); z-index: 67; }
#c68:checked ~ .flip-book #p68 { transform: rotateY(-180deg); z-index: 68; }
#c69:checked ~ .flip-book #p69 { transform: rotateY(-180deg); z-index: 69; }


.home-btn{ position: absolute; bottom: 25px; }
.home-btn a{ 
	background: #f0bd1b;
  padding: 18px 24px;
  border-radius: 5px;
  color: #1a475f;
  font-weight: 800;
  transition: 1s; text-decoration: none;
}
.home-btn a:hover{ background:#1a475f; color: #f0bd1b; }
@media (max-width: 996px) {.home-btn{ bottom: 10%;}}