/* This file contains additional responsive styles beyond what's in style.css */

@media (max-width: 1400px) {
    .section-container {
        padding: 0 var(--space-xl);
    }
}

@media (max-width: 480px) {
    .section-container {
        padding: 0 var(--space-md);
    }
    
    .glitch-text {
        font-size: 2rem;
    }
    
    .typewriter {
        font-size: 1rem;
    }
    
    .hero-bio {
        font-size: 0.95rem;
    }
    
    .stats-container {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .stat-item {
        flex: 1 1 120px;
    }
    
    .stat-value {
        font-size: 1.8rem;
    }
    
    .stat-label {
        font-size: 0.9rem;
    }
    
    .skills-tabs {
        flex-wrap: wrap;
    }
    
    .filter-button {
        padding: var(--space-xs) var(--space-md);
        font-size: 0.9rem;
    }
    
    .modal-body {
        flex-direction: column;
    }
    
    .nav-controls button {
        width: 36px;
        height: 36px;
    }
    
    .timeline-tabs {
        flex-direction: column;
        align-items: center;
    }
    
    .timeline-tab {
        width: 100%;
        text-align: center;
    }
}