/* 1980s Neon Grid Animated Background */
.neon-grid-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    background: 
        linear-gradient(90deg, transparent 98%, #00ffff 100%),
        linear-gradient(0deg, transparent 98%, #00ffff 100%);
    background-size: 50px 50px;
    animation: neonGridMove 20s linear infinite;
    opacity: 0.3;
}

.neon-grid-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(90deg, transparent 98%, #ff00ff 100%),
        linear-gradient(0deg, transparent 98%, #ff00ff 100%);
    background-size: 100px 100px;
    animation: neonGridMove 15s linear infinite reverse;
    opacity: 0.2;
}

.neon-grid-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(90deg, transparent 98%, #ffff00 100%),
        linear-gradient(0deg, transparent 98%, #ffff00 100%);
    background-size: 75px 75px;
    animation: neonGridMove 25s linear infinite;
    opacity: 0.15;
}

@keyframes neonGridMove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

/* Neon glow effect for the grid */
.neon-grid-background {
    box-shadow: 
        inset 0 0 100px rgba(0, 255, 255, 0.1),
        inset 0 0 200px rgba(255, 0, 255, 0.05),
        inset 0 0 300px rgba(255, 255, 0, 0.03);
}

/* Additional neon effects */
.neon-grid-background::before {
    box-shadow: 
        inset 0 0 150px rgba(255, 0, 255, 0.1),
        inset 0 0 300px rgba(255, 0, 255, 0.05);
}

.neon-grid-background::after {
    box-shadow: 
        inset 0 0 200px rgba(255, 255, 0, 0.1),
        inset 0 0 400px rgba(255, 255, 0, 0.05);
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .neon-grid-background {
        background-size: 30px 30px;
    }
    
    .neon-grid-background::before {
        background-size: 60px 60px;
    }
    
    .neon-grid-background::after {
        background-size: 45px 45px;
    }
}

@media screen and (max-width: 480px) {
    .neon-grid-background {
        background-size: 25px 25px;
    }
    
    .neon-grid-background::before {
        background-size: 50px 50px;
    }
    
    .neon-grid-background::after {
        background-size: 35px 35px;
    }
}