/* First, add a background to your main page so you can see the effect */
body {
    margin: 0;
    font-family: sans-serif;
    /* You can use a color, an image, or a gradient */
    background: linear-gradient(to right, #4a00e0, #8e2de2); /* Example purple gradient */
    background-attachment: fixed; /* Keeps the background from scrolling */
}

/* Your main content container */
.content {
    padding: 50px;
    text-align: center;
    color: white;
}


/* --- This is the CSS for the cracked glass effect --- */

.cracked-glass-overlay {
    /* Position it to cover the entire screen */
    position: fixed; /* Stays in place even when scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* The background image */
    /* !!! IMPORTANT: Replace 'cracked-glass.png' with the actual path to your image !!! */
    background-image: url('cracked-glass.png');

    /* How the background image should behave */
    background-size: cover; /* Stretches the image to cover the entire element */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */

    /* Make it semi-transparent for a subtle effect (optional) */
    opacity: 0.4; /* Adjust value between 0.0 (invisible) and 1.0 (fully visible) */

    /* IMPORTANT: This lets you click on links and buttons behind the overlay */
    pointer-events: none;

    /* Ensures the overlay is on top of other elements */
    z-index: 999;
}