*, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: "Arial Black";
            color: rgb(25, 25, 25);
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 2300px;
            margin: 0;
            background-color: rgb(245, 245, 245);
            }

        #flip_book {
            position: absolute;
            width: 698px;
            transition-duration: 1s;
            transform: rotate(90deg);
        }

        input {
            display: none;
        }
        .front_cover, .back_cover {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 420px;
            border-radius: 2.5px 5px 5px 2.5px;
            background-image: url(./images/flip_book_edge_shading.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-color: rgb(220, 20, 60);
            box-shadow: 0 0 5px 0 rgb(25, 25, 25, 0.25);
        }

        .front_cover {
            position: absolute;
            cursor: pointer;
            transform-origin: center left;
            transition: transform 0.5s;
            z-index: 99;
        }

        .front_cover label {
            position: absolute;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        /* Keep pages centered */
        .page {
            position: absolute;
            top: 10px;
            left: 7px;
            width: 100%;
            height: 400px;
            transform-origin: left;
            transform-style: preserve-3d;
            transform: rotateY(0deg);
            transition-duration: 0.5s;
        }
        .front_page {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
        }

        .front_page label {
            position: absolute;
            width: 100%;
            height: 100%;
            cursor: pointer;
            z-index: 100;
        }

        .back_page {
            position: absolute;
            width: 100%;
            height: 400px;
            backface-visibility: hidden;
            transform: rotateY(180deg);
            z-index: 100;
        }

        .back_page label {
            position: absolute;
            width: 100%;
            height: 400px;
            cursor: pointer;
            z-index: 100;
        }

        .edge_shading {
            position: absolute;
            top: 1px;
            width: auto;	
            height: 400px;
            border-radius: 0 5px 5px 0;
            z-index: 97;
        }

        .front_content {
            position: absolute;
            top: 1px;
            width: auto;	
            height: 400px;
            border-radius: 0 5px 5px 0;
            z-index: 97;
        }

        .back_content {
            position: absolute;
            top: 1px;
            left: 1px;
            width: auto;	
            height: 400px;
            border-radius: 5px 0 0 5px;
            z-index: 97;
        }

        .back_cover {
            position: relative;
            z-index: -1;
        }

        /* Assign z-index for 20 pages */
        #page1 { z-index: 22; }
        #page2 { z-index: 19; }
        #page3 { z-index: 18; }
        #page4 { z-index: 17; }
        #page5 { z-index: 16; }
        #page6 { z-index: 15; }
        #page7 { z-index: 14; }
        #page8 { z-index: 13; }
        #page9 { z-index: 12; }
        #page10 { z-index: 11; }
        #page11 { z-index: 10; }
        #page12 { z-index: 9; }
        #page13 { z-index: 8; }
        #page14 { z-index: 7; }
        #page15 { z-index: 6; }
        #page16 { z-index: 5; }
        #page17 { z-index: 4; }
        #page18 { z-index: 3; }
        #page19 { z-index: 2; }
        #page20 { z-index: 1; }

       

        #cover_checkbox:checked~#flip_book .front_cover {
            transform: rotateY(-180deg);
            transition: transform 1.5s, z-index 0.5s 0.5s;
            z-index: 1;
        }

        #cover_checkbox:checked~#flip_book #cover {
            position: absolute;
            width: 80%;
            height: 80%;
        }

        /* Apply flipping transformations */
        #page1_checkbox:checked ~ #flip_book #page1 { transform: rotateY(-180deg); z-index: 2; }
        #page2_checkbox:checked ~ #flip_book #page2 { transform: rotateY(-180deg); z-index: 3; }
        #page3_checkbox:checked ~ #flip_book #page3 { transform: rotateY(-180deg); z-index: 4; }
        #page4_checkbox:checked ~ #flip_book #page4 { transform: rotateY(-180deg); z-index: 5; }
        #page5_checkbox:checked ~ #flip_book #page5 { transform: rotateY(-180deg); z-index: 6; }
        #page6_checkbox:checked ~ #flip_book #page6 { transform: rotateY(-180deg); z-index: 7; }
        #page7_checkbox:checked ~ #flip_book #page7 { transform: rotateY(-180deg); z-index: 8; }
        #page8_checkbox:checked ~ #flip_book #page8 { transform: rotateY(-180deg); z-index: 9; }
        #page9_checkbox:checked ~ #flip_book #page9 { transform: rotateY(-180deg); z-index: 10; }
        #page10_checkbox:checked ~ #flip_book #page10 { transform: rotateY(-180deg); z-index: 11; }
        #page11_checkbox:checked ~ #flip_book #page11 { transform: rotateY(-180deg); z-index: 12; }
        #page12_checkbox:checked ~ #flip_book #page12 { transform: rotateY(-180deg); z-index: 13; }
        #page13_checkbox:checked ~ #flip_book #page13 { transform: rotateY(-180deg); z-index: 14; }
        #page14_checkbox:checked ~ #flip_book #page14 { transform: rotateY(-180deg); z-index: 15; }
        #page15_checkbox:checked ~ #flip_book #page15 { transform: rotateY(-180deg); z-index: 16; }
        #page16_checkbox:checked ~ #flip_book #page16 { transform: rotateY(-180deg); z-index: 17; }
        #page17_checkbox:checked ~ #flip_book #page17 { transform: rotateY(-180deg); z-index: 18; }
        #page18_checkbox:checked ~ #flip_book #page18 { transform: rotateY(-180deg); z-index: 19; }
        #page19_checkbox:checked ~ #flip_book #page19 { transform: rotateY(-180deg); z-index: 20; }
        #page20_checkbox:checked ~ #flip_book #page20 { transform: rotateY(-180deg); z-index: 21; }