/* Reset margins/padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Full-screen image container */
.container {
    position: relative;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Ensures no scrollbars */
}

/* Background image */
.background-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures full coverage without distortion */
    object-position: center;
    top: 0;
    left: 0;
}
.text-outline {
    font-family: "Italianno", serif;
    font-weight: 700;
    font-style: normal;
    position: absolute;
    font-size: calc(1rem + 11vw); /* Adjust size as needed */
    color: black; /* Outline layer */
    font-weight: bold;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -5; /* Behind the main text */
    filter: blur(2px); /* Slight blur for a softer outline */
}
@keyframes gradientScroll {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
/* Text styling */
.text-overlay {
    font-family: "Italianno", serif;
    font-weight: 700;
    font-style: normal;
    position: absolute;
    font-size: calc(1rem + 10vw); /* Adjust size as needed */
    color: white;
    font-weight: bold;
    text-align: center;
    width: 100%;
    top: 50%; /* Position text */
    left: 50%;
    transform: translate(-50%, -50%); /* Centers text exactly */
    
    background: linear-gradient(90deg, red, yellow, blue, red, yellow); /* Adjust colors */
    background-size: 400% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientScroll 6s linear infinite;

}