:root {
    --line-color: rgba(68, 68, 68, 0.316);
    /* Default grid line color */
    --grid-size: 13vw;
    /* Default grid size */
    --bg-color: #1e1e1e;
    /* Base background color */
    --fade-start: 63vh;
    /* Height where fading starts */
    --fade-end: 82vh;
    /* Height where fading ends */
    --sphere-left-color: rgba(86, 22, 150, 0.7);
    /* Updated purple color for left sphere */
    --sphere-left-glow: rgba(128, 45, 180, 0.5);
    /* Subtle purple glow for left sphere */
    --sphere-right-color: rgba(17, 89, 162, 0.7);
    /* Modern blue for right sphere */
    --sphere-right-glow: rgba(30, 115, 200, 0.5);
    /* Subtle blue glow for right sphere */
    --sphere-size: 46vw;
    /* Size of each sphere */
    --sphere-glow-size: 70vw;
    /* Glow radius for the spheres */
}

body {
    margin: 0;
    background-color: var(--bg-color);
    /* Set the base background color */
    position: relative;
    /* Allow positioning for pseudo-elements */
    overflow: clip;
}

body::before {
    content: "";
    position: absolute;
    /* Attach to the scrollable document */
    top: 0;
    left: 0;
    width: 100%;
    height: 94vh;
    /* Extend the background over the scrolling area */
    z-index: -3;
    /* Push it behind all other content */
    background-color: var(--bg-color);
    /* Base background color */
    background-image:
        linear-gradient(0deg, var(--line-color) 2px, transparent 2px),
        /* Horizontal lines */
        linear-gradient(90deg, var(--line-color) 2px, transparent 2px);
    /* Vertical lines */
    background-size: var(--grid-size) var(--grid-size);
    /* Grid size */
    pointer-events: none;
    /* Prevent interaction */
}

body::after {
    content: "";
    position: absolute;
    /* Attach to the scrollable document */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* Extend the fading effect over the grid */
    z-index: -2;
    /* Place this above the grid */
    background-image:
        linear-gradient(to bottom, transparent var(--fade-start), var(--bg-color) var(--fade-end)),
        /* Left Sphere: Glow + Sphere */
        radial-gradient(circle at -3% 14%, var(--sphere-left-glow), transparent var(--sphere-glow-size)),
        radial-gradient(circle at -3% 14%, var(--sphere-left-color), transparent var(--sphere-size)),
        /* Right Sphere: Glow + Sphere */
        radial-gradient(circle at 103% 14%, var(--sphere-right-glow), transparent var(--sphere-glow-size)),
        radial-gradient(circle at 103% 14%, var(--sphere-right-color), transparent var(--sphere-size));
    /* The spheres and fading effect */
    pointer-events: none;
    /* Prevent interaction */
}