:root {
            --dark-bg: #121212;
            --dark-card: #1E1E1E;
            --accent-color: #4A90E2;
        }
        
        body {
            background-color: var(--dark-bg);
            color: white;
            font-family: 'Inter', sans-serif;
            scrollbar-width: thin;
            scrollbar-color: var(--accent-color) var(--dark-bg);
        }
        
        /* Custom Scrollbar */
        body::-webkit-scrollbar {
            width: 8px;
        }
        
        body::-webkit-scrollbar-track {
            background: var(--dark-bg);
        }
        
        body::-webkit-scrollbar-thumb {
            background-color: var(--accent-color);
            border-radius: 20px;
        }
        
        /* Hover and Focus Effects */
        .hover-glow:hover {
            box-shadow: 0 0 15px rgba(74, 144, 226, 0.5);
            transition: all 0.3s ease;
        }
        
         .shadow-glow {
            box-shadow: 0 0 15px rgba(74, 144, 226, 0.5);
        }
        
        .card-shadow {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        }
        
        /* Skill Progress Bar */
        .skill-bar {
            background: linear-gradient(to right, var(--accent-color) var(--percent), #333 var(--percent));
        }
        
 
        @media (min-width: 320px) and (max-width: 480px) {
            #profile {
                width: 70%;
                height: 70%;
            }
            
            #nav {
                max-width: 400px;
            }
        }