/* This styles the entire webpage behind the book */
body {
    background-color: #333; /* A dark grey background */
    margin: 0; /* Removes default browser spacing */
    min-height: 100vh; /* Makes the body fill the entire screen height */

    /* These three lines do the centering magic */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* This is the main container for the flipbook */
.flip-book {
    box-shadow: 0 0 20px rgba(0,0,0,0.5); /* Adds a shadow to give the book depth */
}

/* This styles every single page */
.page {
    background-color: transparent; /* Makes the page container invisible */
    color: #2c2c2c;
    overflow: hidden;
}

/* This styles the text paragraphs on your pages */
.page p {
    padding: 30px; /* Gives the text some space from the edges */
    font-family: Georgia, 'Times New Roman', serif; /* A classic book font */
    font-size: 16px;
    line-height: 1.6; /* Space between lines for easier reading */
    text-align: justify; /* Makes the text even on both left and right sides */
}

/* This is a key part! It makes sure your images and videos fill their page perfectly */
.page img,
.page video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* This covers the page without stretching the image */
}

/* Special styling for your front and back covers */
.page-cover {
    background-color: #4a1e1e; /* A dark, rich color for the cover */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Makes the main title on the cover larger */
.page-cover h1 {
    font-size: 3em;
    margin: 0;
}