/* Ensure the body and HTML are correctly styled */
:root {
    --overlay-opacity: 0.66;
    --text-color: white;
    --transparent-background-red: 0;
    --transparent-background-green: 0;
    --transparent-background-blue: 0;
    --redBrightness: 20;
    --greenBrightness: 40;
    --blueBrightness: 90;
}

body, html {
    transition: color 0.5s;
    color: var(--text-color);
}



/* Add overlay directly on the #imageGrid */
#imageGrid {
    position: relative;
    width: 100%;
    height: 100vh;
    /* background: url('path-to-your-image.jpg') no-repeat center center/cover; */
    /* This is where you would apply the background image dynamically with JS */
}

/* Create the blue-grey overlay and fix it in place */
#imageGrid::before {
    content: "";
    position: fixed; /* Fixes the overlay to stay in place while scrolling */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--redBrightness), var(--greenBrightness), var(--blueBrightness), var(--overlay-opacity) );; /* Blue-grey overlay */
    z-index: 2;
}

/* Ensure the text remains above the overlay */
.text-container, .result{
    
    
    transition: background-color 0.5s;
    background-color: rgba(var(--transparent-background-red), var(--transparent-background-green), var(--transparent-background-blue), .2); /*0.2);*/ /* Optional: Adds a semi-transparent background */
    
    
    
    border-radius: 30px;
   
    backdrop-filter: blur(6px);
}

/* Transition zone styling */
.transition-zone {
    width: 100%;
    height: 60px; /* The height of the blending area */
    position: relative;
    margin-top: -30px; /* Ensures it sits directly on top of the boundary */
    margin-bottom: -30px; /* Ensures it sits directly on top of the boundary */
    z-index: 1;
    pointer-events: none; /* Prevents interaction */
}

/* Proper blending effect */
.transition-zone::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(var(--redBrightness), var(--greenBrightness), var(--blueBrightness), 0) 0%, rgba(var(--redBrightness), var(--greenBrightness), var(--blueBrightness), 1) 50%, rgba(var(--redBrightness), var(--greenBrightness), var(--blueBrightness), 0) 100%);
    z-index: 1;
    opacity: 1; /* Adjust opacity strength for better blending */
}