/* add sound on page turn */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    display: grid;
    place-content: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: #b9b4a0;
}

a {
    z-index: 1000000;
    cursor: pointer;
}

#backbtn img {
    position: absolute;
    top: 30px;
    left: 30px;
}

.flipbook {
    position: relative;
    right: 240px;
}

/* blinkie animation */
.flipbook.blink::after {
    z-index: 10;
    content: '';
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: 20px;
    height: 20px;
    background: rgb(213, 5, 5);
    border-radius: 50%;

    animation: blink 1600ms  infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    } 50% {
        opacity: 0;
    } 100% {
        opacity: 0;
    }
}

.hard img {
    width: 480px;
    height: 700px;
 }

.left.inside-cover img {
    transform: rotate(180deg);
    transform: rotateY(180deg);
}

.page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page>div {
    column-fill: auto;
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-width: 170px;
    -webkit-column-width: 170px;
    -moz-column-width: 170px;

    width: 85%;
    height: 90%;
}

p {
    margin-bottom: 25px;
    color: rgba(0, 0, 0, 0.889);
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 500;
    font-size: 20px;
}

p span {
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: maroon;
}

.page img {
    border-radius: 0px 40px 40px 0px;
}

.left.page {
    border-radius: 40px 0px 0px 40px;
}

.own-size.page,
.own-size.page img {
    width: 460px;
    height: 660px;

    background-image: url(../media/images/pageTexture.webp);
    background-size: cover;

    border-radius: 0px 25px 25px 0px;
    border-top-left-radius: 80px 5px;
    border-bottom-left-radius: 80px 5px;
}

.left.own-size.page,
.left.own-size.page img {
    border-radius: 25px 0px 0px 25px;
    border-top-right-radius: 80px 5px;
    border-bottom-right-radius: 80px 5px;
}