:root {
    --color-bg: #0a0a0a; /* Darker background for better contrast */ --color-text: 
    #ffffff; /* Pure white text */
    --color-primary: #d4ff00; /* Adjusted yellow - better contrast */ 
    --color-secondary: #00ff62; /* Adjusted green - better contrast */ 
    --color-accent: #ffee00; /* Warmer yellow for accents */ --color-dark: #000000; 
    /* Pure black for maximum contrast */ --color-terminal-green: #00ff62; 
    --color-glow: rgba(212, 255, 0, 0.5); --font-display: 'Orbitron', sans-serif; 
    --font-body: 'Space Grotesk', sans-serif;
}
/* Reset & Base Styles */ *, *::before, *::after { margin: 0; padding: 0; 
    box-sizing: border-box;
}
html { font-size: 16px; scroll-behavior: smooth;
}
body { background-color: var(--color-bg); color: var(--color-text); font-family: 
    var(--font-body); line-height: 1.6; overflow-x: hidden; position: relative;
}
/* Noise Effect */ .noise { position: fixed; top: 0; left: 0; width: 100%; height: 
    100%; background: 
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAElBMVEUAAAAAAAAAAAAAAAAAAAAAAADgKxmiAAAABnRSTlMDAwMDAwPduPppAAAAbUlEQVQ4jWNgYGBgEEthYAABViUPBgYGZQEGB4AAQyBDgABDAEMAQyADQyBDAEMAQyBDAAODEAODEAODEAODEAODEAODEAODEAODEAODEAODEAA+5jsqtXUxPgAAAABJRU5ErkJggg=='); 
    opacity: 0.05; pointer-events: none; z-index: 1;
}
/* Scanline Effect */ .scanline { position: fixed; top: 0; left: 0; width: 100%; 
    height: 100%; background: linear-gradient(
        to bottom, transparent 50%, rgba(0, 255, 65, 0.02) 50% ); background-size: 
    100% 4px; pointer-events: none; z-index: 2;
}
/* Grid Container */ .grid-container { display: grid; grid-template-rows: auto 1fr 
    auto; min-height: 100vh; position: relative; z-index: 3;
}
/* Header & Navigation */ .header { padding: 2rem; display: flex; justify-content: 
    space-between; align-items: center; border-bottom: 1px solid rgba(240, 255, 0, 
    0.2);
}
.glitch-container { position: relative; display: flex; align-items: center;
}
.glitch { font-family: var(--font-display); font-size: 2rem; font-weight: 700; 
    color: var(--color-text); text-shadow:
        0 0 5px var(--color-primary), 0 0 10px var(--color-primary), 0 0 20px 
        var(--color-primary);
    animation: glitch 1s infinite;
}
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%;
}
.glitch::before { left: 2px; text-shadow: -2px 0 var(--color-secondary); clip: 
    rect(24px, 550px, 90px, 0); animation: glitch-anim 3s infinite linear 
    alternate-reverse;
}
.glitch::after { left: -2px; text-shadow: -2px 0 var(--color-accent); clip: 
    rect(85px, 550px, 140px, 0); animation: glitch-anim 2s infinite linear 
    alternate-reverse;
}
.nav { display: flex; gap: 2rem;
}
.nav-item a { font-family: var(--font-display); text-decoration: none; color: 
    var(--color-text); font-size: 1rem; font-weight: 500; transition: all 0.3s 
    ease; position: relative; text-shadow: 0 0 10px var(--color-text);
}
.nav-item a::before { content: '['; color: var(--color-terminal-green); 
    margin-right: 0.25rem; text-shadow: 0 0 10px var(--color-terminal-green);
}
.nav-item a::after { content: ']'; color: var(--color-terminal-green); margin-left: 
    0.25rem; text-shadow: 0 0 10px var(--color-terminal-green);
}
.nav-item a:hover { color: var(--color-terminal-green); text-shadow: 0 0 5px 
        var(--color-terminal-green), 0 0 10px var(--color-terminal-green), 0 0 20px 
        var(--color-primary), 0 0 40px var(--color-glow);
    transform: translateY(-1px);
}
.nav-item a:hover::before, .nav-item a:hover::after { color: var(--color-primary); 
    text-shadow:
        0 0 5px var(--color-primary), 0 0 10px var(--color-primary), 0 0 20px 
        var(--color-primary), 0 0 40px var(--color-glow);
    animation: bracketPulse 1.5s ease-in-out infinite;
}
@keyframes bracketPulse { 0%, 100% { text-shadow: 0 0 5px var(--color-primary), 0 0 
            10px var(--color-primary), 0 0 20px var(--color-primary);
    }
    50% { text-shadow: 0 0 10px var(--color-primary), 0 0 20px 
            var(--color-primary), 0 0 40px var(--color-primary), 0 0 60px 
            var(--color-glow);
    }
}
/* Terminal Section */ .terminal { background: var(--color-dark); border: 1px solid 
    var(--color-terminal-green); border-radius: 6px; max-width: 600px; margin: 4rem 
    auto; box-shadow: 0 0 20px var(--color-glow);
}
.terminal-header { background: rgba(0, 255, 65, 0.1); padding: 0.5rem 1rem; 
    display: flex; justify-content: space-between; align-items: center; 
    border-bottom: 1px solid var(--color-terminal-green);
}
.terminal-title { font-family: var(--font-display); font-size: 0.875rem; color: 
    var(--color-terminal-green);
}
.terminal-buttons { display: flex; gap: 0.5rem;
}
.terminal-buttons span { width: 12px; height: 12px; border-radius: 50%; background: 
    rgba(255, 255, 255, 0.2);
}
.terminal-content { padding: 1rem;
}
.line { margin-bottom: 0.5rem; font-family: monospace;
}
.prompt { color: var(--color-terminal-green); margin-right: 0.5rem;
}
.command { color: var(--color-text);
}
.response { color: rgba(224, 224, 255, 0.7);
}
.cursor { display: inline-block; width: 8px; height: 16px; background-color: 
    var(--color-terminal-green); animation: blink 1s infinite;
}
/* Projects Section */ .section-title { font-family: var(--font-display); 
    font-size: 2.5rem; margin-bottom: 3rem; text-align: center; position: relative; 
    color: var(--color-text); text-shadow: 0 0 10px var(--color-primary);
}
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, 
    minmax(300px, 1fr)); gap: 2rem; padding: 2rem;
}
.project-card { background: var(--color-dark); border: 1px solid 
    var(--color-primary); border-radius: 4px; overflow: hidden; transition: 
    transform 0.3s ease; box-shadow: 0 0 15px var(--color-glow);
}
.project-card:hover { transform: translateY(-5px);
}
.project-image { position: relative; overflow: hidden;
}
.project-image img { width: 100%; height: auto; display: block; transition: 
    transform 0.3s ease;
}
.project-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(13, 13, 13, 0.9); border: 1px solid var(--color-primary); 
    display: flex; align-items: flex-end; padding: 1.5rem; opacity: 0; transition: 
    opacity 0.3s ease;
}
.project-card:hover .project-overlay { opacity: 1;
}
.project-number { font-family: var(--font-display); color: var(--color-primary); 
    font-size: 0.875rem; margin-bottom: 0.5rem; display: block; text-shadow: 0 0 
    10px var(--color-primary);
}
.project-meta h3 { font-family: var(--font-display); color: var(--color-text); 
    margin-bottom: 0.5rem;
}
.project-info { padding: 1rem; display: flex; justify-content: space-between; 
    align-items: center;
}
.tech-stack { display: flex; gap: 1rem;
}
.tech-stack span { font-size: 0.875rem; color: var(--color-accent);
}
.project-link { font-family: var(--font-display); color: var(--color-primary); 
    text-decoration: none; font-size: 0.875rem; transition: color 0.3s ease;
}
.project-link:hover { color: var(--color-secondary);
}
/* Skills Section */ .skills-container { padding: 2rem; display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem;
}
.skill-category h3 { font-family: var(--font-display); color: var(--color-primary); 
    margin-bottom: 2rem;
}
.skill-grid { display: grid; gap: 1.5rem;
}
.skill-item { position: relative;
}
.skill-name { display: block; margin-bottom: 0.5rem;
}
.skill-bar { height: 4px; background: rgba(0, 255, 157, 0.1); position: relative; 
    overflow: hidden;
}
.skill-bar::before { content: ''; position: absolute; top: 0; left: 0; height: 
    100%; background: linear-gradient(90deg,
        var(--color-terminal-green) 0%, var(--color-primary) 100% ); width: 
    var(--width, 0%); animation: fillBar 1s ease forwards; box-shadow: 0 0 10px 
    var(--color-glow);
}
/* Contact Section */ .contact-container { padding: 4rem 2rem; text-align: center;
}
.contact-info h3 { font-family: var(--font-display); color: var(--color-primary); 
    margin-bottom: 1rem;
}
.email-link { display: inline-block; color: var(--color-primary); text-decoration: 
    none; font-size: 2rem; margin: 2rem 0; position: relative; transition: color 
    0.3s ease; text-shadow: 0 0 10px var(--color-glow);
}
.email-link:hover { color: var(--color-terminal-green); text-shadow: 0 0 10px 
    var(--color-glow);
}
.social-links { display: flex; justify-content: center; gap: 2rem; margin-top: 
    2rem;
}
.social-link { text-decoration: none; color: var(--color-text); display: flex; 
    align-items: center; gap: 0.5rem; transition: color 0.3s ease;
}
.social-link:hover { color: var(--color-terminal-green); text-shadow: 0 0 10px 
    var(--color-glow);
}
.link-icon { transition: transform 0.3s ease;
}
.social-link:hover .link-icon { transform: translateX(5px);
}
/* Footer */ .footer { padding: 2rem; border-top: 1px solid rgba(240, 255, 0, 0.2);
}
.footer-content { display: flex; justify-content: space-between; align-items: 
    center;
}
.footer-links { display: flex; gap: 2rem;
}
.footer-links a { color: var(--color-text); text-decoration: none; font-size: 
    0.875rem; transition: color 0.3s ease;
}
.footer-links a:hover { color: var(--color-primary);
}
/* Animations */ @keyframes glitch { 0% { text-shadow: 0 0 5px 
            var(--color-primary), 0 0 10px var(--color-primary), 0 0 20px 
            var(--color-primary);
    }
    50% { text-shadow: 0 0 5px var(--color-secondary), 0 0 10px 
            var(--color-secondary), 0 0 20px var(--color-secondary);
    }
    100% { text-shadow: 0 0 5px var(--color-primary), 0 0 10px 
            var(--color-primary), 0 0 20px var(--color-primary);
    }
}
@keyframes glitch-anim { 0% { clip: rect(44px, 9999px, 99px, 0);
    }
    5% { clip: rect(12px, 9999px, 59px, 0);
    }
    10% { clip: rect(48px, 9999px, 29px, 0);
    }
    15% { clip: rect(42px, 9999px, 73px, 0);
    }
    20% { clip: rect(63px, 9999px, 27px, 0);
    }
    25% { clip: rect(34px, 9999px, 55px, 0);
    }
    30% { clip: rect(86px, 9999px, 73px, 0);
    }
    35% { clip: rect(20px, 9999px, 20px, 0);
    }
    40% { clip: rect(26px, 9999px, 60px, 0);
    }
    45% { clip: rect(25px, 9999px, 66px, 0);
    }
    50% { clip: rect(57px, 9999px, 98px, 0);
    }
    55% { clip: rect(5px, 9999px, 46px, 0);
    }
    60% { clip: rect(82px, 9999px, 31px, 0);
    }
    65% { clip: rect(54px, 9999px, 27px, 0);
    }
    70% { clip: rect(28px, 9999px, 99px, 0);
    }
    75% { clip: rect(45px, 9999px, 69px, 0);
    }
    80% { clip: rect(23px, 9999px, 85px, 0);
    }
    85% { clip: rect(54px, 9999px, 84px, 0);
    }
    90% { clip: rect(45px, 9999px, 47px, 0);
    }
    95% { clip: rect(37px, 9999px, 20px, 0);
    }
    100% { clip: rect(4px, 9999px, 91px, 0);
    }
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; }
}
@keyframes fillBar { from { width: 0; } to { width: var(--width); }
}
/* Media Queries */ @media (max-width: 768px) { .header { flex-direction: column; 
        gap: 1rem; text-align: center;
    }
    .nav { flex-direction: column; gap: 1rem;
    }
    .project-grid { grid-template-columns: 1fr;
    }
    .skills-container { grid-template-columns: 1fr;
    }
    .email-link { font-size: 1.5rem;
    }
    .footer-content { flex-direction: column; gap: 1rem; text-align: center;
    }
}
/* For elements that need maximum contrast */ .high-contrast-text { color: 
    var(--color-text); text-shadow:
        0 0 2px var(--color-bg), 0 0 4px var(--color-bg);
}
/* For interactive elements that use primary color */ .interactive-element { color: 
    var(--color-primary); font-weight: 600; /* Making text bolder for better 
    readability */
}
/* For elements using secondary color */ .secondary-element { color: 
    var(--color-secondary); font-weight: 600;
}
/* Projects Showcase Styles */ .projects-showcase { padding: 2rem;
}
.project-filters { display: flex; justify-content: center; gap: 1rem; 
    margin-bottom: 3rem; flex-wrap: wrap;
}
.filter-btn { background: none; border: 1px solid var(--color-primary); color: 
    var(--color-text); padding: 0.75rem 1.5rem; font-family: var(--font-display); 
    font-size: 0.875rem; cursor: pointer; transition: all 0.3s ease; position: 
    relative; overflow: hidden;
}
.filter-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 
    100%; height: 100%; background: var(--color-primary); opacity: 0; transition: 
    opacity 0.3s ease; z-index: -1;
}
.filter-btn:hover::before, .filter-btn.active::before { opacity: 0.1;
}
.filter-btn:hover { color: var(--color-primary); text-shadow: 0 0 8px 
    var(--color-glow);
}
.filter-btn.active { border-color: var(--color-secondary); color: 
    var(--color-secondary); text-shadow: 0 0 8px var(--color-secondary);
}
/* Detailed Project Card Styles */ .project-card.detailed { padding: 2rem; 
    margin-bottom: 3rem; background: linear-gradient(
        145deg, var(--color-dark) 0%, rgba(10, 10, 10, 0.95) 100% ); border: 1px 
    solid var(--color-primary); position: relative; overflow: visible;
}
.project-header { display: flex; justify-content: space-between; align-items: 
    center; margin-bottom: 2rem;
}
.project-stats { display: flex; gap: 2rem;
}
.stat { font-family: var(--font-display); font-size: 0.875rem; color: 
    var(--color-accent);
}
.project-content h3 { font-family: var(--font-display); font-size: 1.5rem; 
    margin-bottom: 1rem; color: var(--color-text); text-shadow: 0 0 10px 
    var(--color-primary);
}
.project-content p { color: var(--color-text); margin-bottom: 2rem; line-height: 
    1.6;
}
.tech-tag { display: inline-block; padding: 0.5rem 1rem; background: rgba(0, 255, 
    98, 0.1); border: 1px solid var(--color-secondary); color: 
    var(--color-secondary); font-family: var(--font-display); font-size: 0.875rem; 
    margin: 0.25rem; transition: all 0.3s ease;
}
.tech-tag:hover { background: rgba(0, 255, 98, 0.2); transform: translateY(-2px);
}
.project-metrics { display: grid; grid-template-columns: repeat(auto-fit, 
    minmax(200px, 1fr)); gap: 2rem; margin-top: 2rem; padding-top: 2rem; 
    border-top: 1px solid rgba(212, 255, 0, 0.2);
}
.metric { text-align: center;
}
.metric-value { display: block; font-family: var(--font-display); font-size: 2rem; 
    color: var(--color-primary); margin-bottom: 0.5rem; text-shadow: 0 0 10px 
    var(--color-glow);
}
.metric-label { font-size: 0.875rem; color: var(--color-text); text-transform: 
    uppercase;
}
/* Project Card Hover Effects */ .project-card.detailed::before { content: ''; 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: 
    linear-gradient(45deg,
        var(--color-primary) 0%, transparent 100% ); opacity: 0; transition: 
    opacity 0.3s ease; pointer-events: none;
}
.project-card.detailed:hover::before { opacity: 0.02;
}
/* Animation for Project Cards */ @keyframes projectReveal { from { opacity: 0; 
        transform: translateY(20px);
    }
    to { opacity: 1; transform: translateY(0);
    }
}
.project-card.detailed { animation: projectReveal 0.5s ease forwards; opacity: 0;
}
.project-card.detailed:nth-child(2) { animation-delay: 0.2s;
}
.project-card.detailed:nth-child(3) { animation-delay: 0.4s;
}
/* Responsive Adjustments */ @media (max-width: 768px) { .project-header { 
        flex-direction: column; gap: 1rem; align-items: flex-start;
    }
    .project-stats { flex-direction: column; gap: 0.5rem;
    }
    .project-metrics { grid-template-columns: 1fr; gap: 1.5rem;
    }
    .filter-btn { width: 100%; text-align: center;
    }
}
/* Logo Styles */ .logo-wrapper { display: flex; align-items: center;
}
.glitch-container { position: relative; display: flex; align-items: center;
}
/* Mobile Styles */ @media (max-width: 768px) { /* Global Layout */ .grid-container 
    {
        grid-template-columns: 1fr; padding: 1rem;
    }
    .main { padding: 1rem 0;
    }
    /* Navigation */ .nav-container { padding: 1rem;
    }
    .nav-links { flex-direction: column; gap: 1rem; align-items: flex-start;
    }
    .nav-link { font-size: 1rem;
    }
    /* Hero Section */ .hero { min-height: auto; padding: 2rem 0;
    }
    .terminal { width: 100%; margin: 0;
    }
    .terminal-content { padding: 1rem;
    }
    /* Projects Section */ .project-grid { grid-template-columns: 1fr; gap: 2rem;
    }
    .project-card { margin-bottom: 2rem;
    }
    .project-image img { height: 200px;
    }
    .project-overlay { padding: 1rem;
    }
    .tech-stack { flex-wrap: wrap; gap: 0.5rem;
    }
    .tech-stack span { font-size: 0.8rem; padding: 0.3rem 0.6rem;
    }
    /* Skills Section */ .skills-container { grid-template-columns: 1fr; gap: 2rem;
    }
    .skill-category { padding: 1rem;
    }
    .skill-grid { gap: 1rem;
    }
    .skill-item { padding: 0.5rem;
    }
    /* Contact Section */ .contact-container { flex-direction: column; padding: 
        1.5rem;
    }
    .contact-info { text-align: center; margin-bottom: 2rem;
    }
    .social-links { flex-direction: column; gap: 1rem; align-items: stretch;
    }
    .social-link { width: 100%; justify-content: space-between; padding: 0.8rem 
        1rem;
    }
    /* Project Detail Page */ .project-header { flex-direction: column; gap: 
        1.5rem; padding: 1.5rem;
    }
    .project-meta h1 { font-size: 2rem;
    }
    .project-links { flex-direction: column; width: 100%;
    }
    .project-showcase { gap: 1.5rem;
    }
    .project-gallery { margin: 1rem 0;
    }
    .tech-grid, .features-grid, .metrics-grid { grid-template-columns: 1fr; gap: 
        1rem;
    }
    /* Projects Showcase Page */ .projects-showcase { padding: 1rem;
    }
    .project-filters { flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem;
    }
    .filter-btn { font-size: 0.8rem; padding: 0.5rem 1rem;
    }
    .projects-grid { grid-template-columns: 1fr; gap: 2rem;
    }
    .project-card.detailed { padding: 1rem;
    }
    .project-header { flex-direction: column; gap: 1rem;
    }
    .project-stats { flex-wrap: wrap; gap: 0.5rem;
    }
    .project-metrics { grid-template-columns: 1fr; gap: 1rem;
    }
    /* Section Titles */ .section-title { font-size: 1.8rem; margin-bottom: 1.5rem;
    }
    /* Terminal Effects */ .scanline { opacity: 0.3;
    }
    .noise { opacity: 0.1;
    }
    /* Footer */ .footer { padding: 1.5rem;
    }
    .footer-content { flex-direction: column; gap: 1rem; text-align: center;
    }
    .footer-links { justify-content: center;
    }
}
/* Small Mobile Devices */ @media (max-width: 480px) { .terminal-content { 
        font-size: 0.9rem;
    }
    .project-meta h1 { font-size: 1.6rem;
    }
    .section-title { font-size: 1.5rem;
    }
    .skill-item { font-size: 0.9rem;
    }
    .contact-info h3 { font-size: 1.2rem;
    }
    .project-number { font-size: 1rem;
    }
    .metric-value { font-size: 2rem;
    }
    .metric-label { font-size: 0.8rem;
    }
}
/* Navigation Styles */ .nav-container { padding: 1rem 2rem; border-bottom: 1px 
    solid rgba(240, 255, 0, 0.2); display: flex; justify-content: space-between; 
    align-items: center;
}
.nav-header { display: flex; align-items: center;
}
.logo-wrapper { display: flex; align-items: center;
}
.logo-wrapper .glitch { margin: 0; font-size: 2rem; position: relative;
}
.glitch::before, .glitch::after { width: 100%; height: 100%; position: absolute; 
    top: 0; left: 0;
}
.nav-links { display: flex; gap: 2rem; align-items: center; margin: 0;
}
.nav-link { font-family: var(--font-display); text-decoration: none; color: 
    var(--color-text); font-size: 1rem; font-weight: 500; transition: all 0.3s 
    ease; position: relative; text-shadow: 0 0 10px var(--color-text);
}
.nav-link::before { content: '['; color: var(--color-terminal-green); margin-right: 
    0.25rem; text-shadow: 0 0 10px var(--color-terminal-green);
}
.nav-link::after { content: ']'; color: var(--color-terminal-green); margin-left: 
    0.25rem; text-shadow: 0 0 10px var(--color-terminal-green);
}
.nav-link:hover { color: var(--color-terminal-green); text-shadow: 0 0 5px 
        var(--color-terminal-green), 0 0 10px var(--color-terminal-green), 0 0 20px 
        var(--color-primary), 0 0 40px var(--color-glow);
    transform: translateY(-1px);
}
/* Hamburger Menu */ .hamburger { display: none; background: none; border: none; 
    cursor: pointer; padding: 0.5rem; z-index: 100;
}
.hamburger-line { display: block; width: 25px; height: 2px; margin: 5px 0; 
    background-color: var(--color-terminal-green); transition: all 0.3s ease; 
    box-shadow: 0 0 5px var(--color-terminal-green);
}
/* Mobile Navigation */ @media (max-width: 768px) { .nav-container { padding: 1rem; 
        flex-direction: column; align-items: flex-start;
    }
    .nav-header { width: 100%; justify-content: space-between;
    }
    .hamburger { display: block;
    }
    .nav-links { display: none; position: fixed; top: 0; left: 0; width: 100%; 
        height: 100vh; background: rgba(0, 0, 0, 0.95); flex-direction: column; 
        justify-content: center; align-items: center; gap: 2rem; margin: 0; 
        padding: 2rem; z-index: 90;
    }
    .nav-links.active { display: flex;
    }
    .nav-link { font-size: 1.5rem; opacity: 0; transform: translateX(50px);
    }
    .nav-links.active .nav-link { opacity: 1; transform: translateX(0); transition: 
        all 0.3s ease;
    }
    .nav-links.active .nav-link:nth-child(1) { transition-delay: 0.1s; } 
    .nav-links.active .nav-link:nth-child(2) { transition-delay: 0.2s; } 
    .nav-links.active .nav-link:nth-child(3) { transition-delay: 0.3s; } 
    .nav-links.active .nav-link:nth-child(4) { transition-delay: 0.4s; } /* 
    Hamburger Animation */ .hamburger.active .hamburger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .hamburger.active .hamburger-line:nth-child(2) { opacity: 0;
    }
    .hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-7px) 
        rotate(-45deg);
    }
    /* Prevent scrolling when menu is open */ body.menu-open { overflow: hidden;
    }
}