body {
    background-color: #090e31;
    background-image:
        linear-gradient(90deg, rgba(41, 98, 255, 0.1) 1px, transparent 1px),
        linear-gradient(0deg, rgba(41, 98, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25, 65, 175, 0.05) 1px, transparent 1px),
        linear-gradient(0deg, rgba(25, 65, 175, 0.05) 1px, transparent 1px);
    background-size: 60px 60px, 60px 60px, 20px 20px, 20px 20px;
    background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Main animated grid overlay - Fixed position with containment */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(90deg, transparent 49.5%, rgba(41, 98, 255, 0.3) 50%, transparent 50.5%),
        linear-gradient(0deg, transparent 49.5%, rgba(41, 98, 255, 0.3) 50%, transparent 50.5%);
    background-size: 60px 60px;
    background-position: -1px -1px;
    pointer-events: none;
    z-index: 1;
    animation: gridPulse 4s ease-in-out infinite alternate;
    box-sizing: border-box;
}

/* Glowing orbs and particles - Fixed with viewport units */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Use viewport width instead of 100% */
    height: 100vh; /* Use viewport height instead of 100% */
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(41, 98, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(25, 65, 175, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(41, 98, 255, 0.1) 0%, transparent 40%);
    animation: orbFloat 20s ease-in-out infinite alternate;
    box-sizing: border-box;
}

/* Animated grid lines - Fixed with viewport units */
.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 19px,
            rgba(41, 98, 255, 0.1) 19px,
            rgba(41, 98, 255, 0.1) 20px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 19px,
            rgba(41, 98, 255, 0.1) 19px,
            rgba(41, 98, 255, 0.1) 20px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 59px,
            rgba(25, 65, 175, 0.15) 59px,
            rgba(25, 65, 175, 0.15) 60px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 59px,
            rgba(25, 65, 175, 0.15) 59px,
            rgba(25, 65, 175, 0.15) 60px
        );
    background-size: 20px 100vh, 100vw 20px, 60px 100vh, 100vw 60px;
    animation: scanLines 8s linear infinite;
    opacity: 0.3;
    box-sizing: border-box;
    overflow: hidden;
}

/* Moving data streams - Fixed with viewport containment */
.data-streams {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    opacity: 0.4;
    box-sizing: border-box;
}

.data-streams::before,
.data-streams::after {
    content: '';
    position: absolute;
    width: 100vw; /* Use viewport width */
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(41, 98, 255, 0.8),
        rgba(25, 65, 175, 0.9),
        rgba(41, 98, 255, 0.8),
        transparent);
    filter: blur(1px);
    box-shadow: 0 0 10px rgba(41, 98, 255, 0.5);
    box-sizing: border-box;
}

.data-streams::before {
    top: 20%;
    animation: dataStreamHorizontal 12s linear infinite;
}

.data-streams::after {
    top: 60%;
    animation: dataStreamHorizontal 15s linear infinite reverse;
}

/* Container for content - Add this to your HTML */
.content-container {
    position: relative;
    z-index: 10; /* Higher than the background effects */
    width: 100%;
    max-width: 1200px; /* Or your preferred max width */
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Ensure all elements within body don't cause overflow */
body > *:not(.grid-overlay):not(.data-streams):not(.content-container) {
    position: relative;
    z-index: 10;
    box-sizing: border-box;
}


/* Interactive glow on hover */
body:hover::before {
    animation: gridPulse 2s ease-in-out infinite alternate;
    filter: brightness(1.5);
}

/* Subtle parallax effect on scroll */
@media (prefers-reduced-motion: no-preference) {
    body {
        background-attachment: fixed;
    }
}

/* Media query for very large screens */
@media (min-width: 2000px) {
    body::before,
    body::after,
    .grid-overlay,
    .data-streams {
        width: 100vw;
        height: 100vh;
    }
}