/* General page reset to remove default browser spacing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Main body styling */
body {
    /* Set the background to black to match the image's dark tones */
    background-color: #000000;
    
    /* Use Flexbox to center the content perfectly, both vertically and horizontally */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Ensure the body takes up the full browser window height */
    min-height: 100vh;
    
    /* Hide any potential scrollbars */
    overflow: hidden;
}

/* This is the image itself */
.book-cover-container img {
    /* * Make the image responsive. It will take up 50% of the viewport's width,
     * but it won't get larger than 600px on big screens.
     * You can change these values if you want it bigger or smaller.
    */
    width: 50vw;
    max-width: 600px;
    
    /* This ensures the image keeps its 1:1 aspect ratio */
    aspect-ratio: 1 / 1;
    
    /* --- SMOOTH APPEARANCE ANIMATION --- */
    /* We apply our 'fadeIn' animation, making it last 2 seconds */
    animation: fadeIn 2s ease-in-out forwards;
    
    /* --- SOFT EDGE EFFECT --- */
    /*
     * This is the key property for the soft edges. It uses a gradient as a "mask".
     * The center (black) is fully visible, and it fades to transparent at the edges.
     * The -webkit- prefix is for better browser compatibility.
    */
    -webkit-mask-image: radial-gradient(circle, black 70%, transparent 95%);
    mask-image: radial-gradient(circle, black 70%, transparent 95%);
}

/*
 * @keyframes defines the animation steps. We named our animation 'fadeIn'.
*/
@keyframes fadeIn {
    /* The animation starts here: image is invisible and slightly smaller */
    from {
        opacity: 0;
        transform: scale(0.95); /* A slight zoom effect for a nicer feel */
    }
    /* The animation ends here: image is fully visible and at its normal size */
    to {
        opacity: 1;
        transform: scale(1);
    }
}