body {
    font-family: 'Orbitron', sans-serif;
    /* Create the digital grid background */
    background-color: #0a0a1a;
    background-image:
            radial-gradient(circle at 25% 25%, rgba(255, 0, 0, 0.2), transparent 30%),
            radial-gradient(circle at 75% 75%, rgba(0, 0, 255, 0.2), transparent 30%),
            linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
    animation: pan-background 60s linear infinite;
}

/* Animation for the background grid */
@keyframes pan-background {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}

/* Create a glowing text effect with red and blue shadows */
.glow-text {
    color: #fff;
    text-shadow:
            0 0 7px #fff,
            0 0 10px #fff,
            0 0 21px #fff,
            0 0 42px #00f,
            0 0 82px #f00,
            0 0 92px #f00,
            0 0 102px #f00,
            0 0 151px #f00;
}

/* Add a subtle pulse animation to the main text */
.pulse-glow {
    animation: pulse 2.5s infinite alternate;
}

@keyframes pulse {
    from {
        text-shadow:
                0 0 5px #fff,
                0 0 10px #fff,
                0 0 20px #00aaff,
                0 0 30px #00aaff,
                0 0 40px #ff00ff,
                0 0 55px #ff00ff,
                0 0 75px #ff0000;
    }
    to {
        text-shadow:
                0 0 7px #fff,
                0 0 15px #fff,
                0 0 25px #0055ff,
                0 0 35px #0055ff,
                0 0 45px #aa00ff,
                0 0 60px #aa00ff,
                0 0 80px #ff0055;
    }
}

/* Container for the animated streaks */
.streaks-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none; /* Make it non-interactive */
    z-index: 1;
}

/* Styling for the light streaks */
.streak {
    position: absolute;
    width: 200%;
    height: 4px;
    opacity: 0.7;
}

.streak-red {
    background: linear-gradient(90deg, transparent, currentColor);
    color: #ff0000;
    top: 20%;
    animation: move-streak-1 8s linear infinite;
}

.streak-blue {
    background: linear-gradient(90deg, currentColor, transparent);
    color: #0000ff;
    bottom: 20%;
    animation: move-streak-2 10s linear infinite reverse;
}

/* Animation for the light streaks */
@keyframes move-streak-1 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes move-streak-2 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}