@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

        body {
            font-family: 'Poppins', sans-serif;
            scroll-behavior: smooth;
            background-color: #f8fafc;
        }

        .code-font {
            font-family: 'JetBrains Mono', monospace;
        }

        .gradient-bg {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        }

        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .skill-badge {
            transition: all 0.3s ease;
        }

        .skill-badge:hover {
            transform: scale(1.05);
        }

        .terminal {
            background-color: #1e293b;
            border-radius: 0.5rem;
            padding: 1rem;
            color: #e2e8f0;
            font-family: 'JetBrains Mono', monospace;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .terminal-header {
            display: flex;
            margin-bottom: 0.5rem;
        }

        .terminal-button {
            height: 12px;
            width: 12px;
            border-radius: 50%;
            margin-right: 6px;
        }

        .terminal-red {
            background-color: #ef4444;
        }

        .terminal-yellow {
            background-color: #f59e0b;
        }

        .terminal-green {
            background-color: #10b981;
        }

        .cursor {
            display: inline-block;
            width: 10px;
            height: 1.2em;
            background-color: #e2e8f0;
            animation: blink 1s step-end infinite;
            vertical-align: text-bottom;
            margin-left: 2px;
        }

        @keyframes blink {
            from, to {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
        }

        .nav-link {
            position: relative;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -2px;
            left: 0;
            background-color: #3b82f6;
            transition: width 0.3s ease;
        }

        .nav-link:hover::after {
            width: 100%;
        }

        .active::after {
            width: 100%;
        }