        @import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200;400;600;800&display=swap');
        * {
            font-family: 'Oxanium', sans-serif;
            scroll-behavior: smooth;
        }
        
        body {
            background: #0a0a15;
            color: hsl(240, 18%, 64%);
            overflow-x: hidden;
        }
        
        .gradient-text {
            background: linear-gradient(90deg, #6e45e2, #88d3ce);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .glass-card {
            background: rgba(15, 15, 30, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(110, 69, 226, 0.3);
            border-radius: 16px;
        }
        
        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
        }
        
        .project-card {
            transition: all 0.3s ease;
            perspective: 1000px;
        }
        
        .project-card:hover {
            transform: translateY(-10px) scale(1.02);
        }
        
        .project-card:hover .project-img {
            transform: rotateY(15deg);
            box-shadow: 0 10px 30px rgba(110, 69, 226, 0.5);
        }
        
        .project-img {
            transition: all 0.5s ease;
        }
        
        .skill-bar {
            height: 8px;
            background: rgba(110, 69, 226, 0.2);
            border-radius: 4px;
        }
        
        .skill-progress {
            height: 100%;
            border-radius: 4px;
            background: linear-gradient(90deg, #6e45e2, #88d3ce);
            width: 0;
            transition: width 2s ease;
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
            }
        }
        
        .floating {
            animation: float 6s ease-in-out infinite;
        }