/* Ensure gradient fills the entire screen and sits behind everything */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent scrollbars caused by pseudo-element */
    font-family: 'Stack', Arial, sans-serif;
    position: relative;
}

/* Remove any default HTML background */
html {
    background: none;
}

/* Use a pseudo-element for the gradient with a blurred overlay */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: linear-gradient(135deg,
        #c1fff7 0%,
        #befff5 30%,
        #ffb3f6 70%,
        #faafd5 100%
    );
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(25px); /* Apply Gaussian-style blur */
    transform: scale(1.1); /* Slightly enlarge to hide blur edges */
}

/* Content styling */
#landingTitle {
    color: #2C2C2C;
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    margin-top: 2rem;
    position: relative;
    z-index: 1; /* Keep text above the blur */
}

.header .text {
    color: #3A3A3A;
    font-size: 1.5rem;
    text-align: center;
    margin-top: 1rem;
    position: relative;
    z-index: 1;
}

#titleImage {
    display: block;
    margin: 2rem auto; /* centers horizontally */
    max-width: 40%;
    max-height: 40%;

}