@media (max-width: 760px) {
    
}
:root {
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --nav-bg: #ffffff;
    --card-bg: #ffffff;
    --grid-color: rgba(54, 66, 226, 0.801);
}

body {
    overflow-x: hidden;
    position: relative;
    background: var(--bg-color);
    color: var(--text-color);
    font-family: Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

body::before {
    content: '';
    position: fixed;
    top: -100%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        repeating-linear-gradient(90deg, 
            transparent 0, 
            transparent 19px, 
            var(--grid-color) 20px,
            var(--grid-color) 20px
        ),
        repeating-linear-gradient(0deg, 
            transparent 0, 
            transparent 19px, 
            var(--grid-color) 20px,
            var(--grid-color) 20px
        );
        background-repeat: repeat;
    transform: perspective(900px) rotateX(60deg) translateZ(-1000px);
    animation: gridMovement 10s linear infinite ;
    z-index: -1;
    transform: perspective(900px) rotateX(60deg) translateZ(-300px) scale(5.5); 
    animation: gridMovement 3s linear infinite;
}

/* Add this new rule */
main {
    position: relative;
    z-index: 1;
}

@keyframes gridMovement {
    from { 
        transform: perspective(900px) rotateX(60deg) translateZ(-300px) translateY(0); 
    }
    to { 
        transform: perspective(900px) rotateX(60deg) translateZ(-300px) translateY(20px); 
    }
}
.dark-theme {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
    --nav-bg: #2d2d2d;
    --card-bg: #3d3d3d;
    --grid-color: rgba(255, 215, 0, 0.2);
}

        /* Dark mode specific styles */
        

        .dark-theme .border-black {
            border-color: #4a4a4a;
        }
        .nav-download-btn {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
          }