           .loading {
                position: static;
                background-image: none;
                filter: none;
                perspective: 250px;
            }

            .loadingbook {
                position: relative;
                width: 160px;
                height: 100px;
                background-color: #ff7bf1;
                border-radius: 5px;
                border: solid 2px #c939b9;
                scale: 0.8;
                top: 0px;
                rotate: 1deg;

                transform-style: preserve-3d;
                animation: loadingbookfloat 5s ease infinite alternate;
            }

            @keyframes loadingbookfloat {
                from {
                    top: -10px;
                    rotate: 3deg;
                }

                to {
                    top: 10px;
                    rotate: -3deg;
                }
            }

            .loadingbook .pagestack {
                position: relative;
                width: 130px;
                height: 95px;
                border-radius: 3px;
                top: 2px;
                left: 16px;
                transform-style: preserve-3d;
            }

            .loading .page {
                position: relative;
                transform-origin: left;
                left: 66px;
                width: 65px;
                height: 95px;
                background: linear-gradient(90deg, #a5beeb 0%, rgb(244, 250, 255) 90%);
                filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0));
                border-radius: 2px;
                animation: pageflip 1s infinite;
            }

            @keyframes pageflip {
                0% {
                    background: linear-gradient(90deg, #a5beeb 0%, rgb(244, 250, 255) 90%);
                    transform: rotateY(0deg);
                    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0));
                    opacity: 0;
                }

                10% {
                    opacity: 1;
                }

                50% {
                    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.25));
                }

                80% {
                    opacity: 1;
                }

                100% {
                    background: linear-gradient(90deg, #bacef3 0%, rgb(244, 250, 255) 120%);
                    transform: rotateY(-180deg);
                    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0));
                    opacity: 0;
                }
            }

            .loading .sparkle {
                position: absolute;
                width: 6px;
                height: 6px;
                rotate: 45deg;
                top: 407px;
                left: 205px;
                background-color: #ff7bf1;
                animation: loadingsparkles 0.8s ease infinite alternate;
            }

.loadingsparkles{
    position: absolute;
    top: -369px;
    left: -208px;
}

            @keyframes loadingsparkles {
                from {
                    scale: 0.8;
                }

                to {
                    scale: 1.2;
                }
            }

            .loading .page2 {
                position: absolute;
                transform-origin: left;
                left: 66px;
                width: 75px;
                height: 95px;
                background: linear-gradient(90deg, #bacef3 0%, rgb(244, 250, 255) 120%);
                filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.25));
                border-radius: 2px;
                transform: rotateY(-180deg);
            }
            .loading .page3 {
                position: absolute;
                transform-origin: left;
                left: 66px;
                width: 75px;
                height: 95px;
                background: linear-gradient(90deg, #a5beeb 0%, rgb(244, 250, 255) 90%);
                filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.25));
                border-radius: 2px;
            }
            .loading .page3 img,
            .loading .page2 img {
                mix-blend-mode: multiply;
            }