/* Custom colors, fonts, and base styles */
        :root {
            --primary-bg: #0F172A; /* Deeper, slightly blue-black */
            --primary-text: #E2E8F0; /* Slightly cooler off-white */
            --accent-purple: #A78BFA; /* Vibrant medium purple */
            --secondary-accent-cyan: #22D3EE; /* Vivid cyan */
            --secondary-accent-green: #4ADE80; /* Brighter green */
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--primary-bg);
            color: var(--primary-text);
            scroll-behavior: smooth;
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><rect x="8" y="0" width="2" height="18" fill="%23A78BFA"/><rect x="0" y="8" width="18" height="2" fill="%23A78BFA"/></svg>') 9 9, auto; /* Custom crosshair cursor, now purple */
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Roboto Mono', monospace;
            letter-spacing: 0.08em; /* Increased letter spacing for headings */
        }

        .section-divider {
            height: 1px;
            background: linear-gradient(to right, transparent, var(--accent-purple), transparent);
            margin: 5rem 0; /* More spacing */
        }

        .nier-card {
            background-color: rgba(30, 41, 59, 0.7); /* Slightly lighter background for cards */
            border: 1px solid rgba(167, 139, 250, 0.5); /* More visible accent border */
            border-radius: 0.25rem; /* rounded-md equivalent */
            padding: 2rem; /* Increased padding */
            box-shadow: 0 0 15px rgba(167, 139, 250, 0.15); /* Stronger shadow */
            position: relative;
            overflow: hidden;
        }
        .nier-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                -45deg,
                rgba(167, 139, 250, 0.03),
                rgba(167, 139, 250, 0.03) 5px,
                transparent 5px,
                transparent 10px
            );
            z-index: 0;
            pointer-events: none;
        }

        /* Subtle glitch effect on hover for specific elements */
        .glitch-hover:hover {
            animation: glitch-text 0.3s cubic-bezier(.25, .46, .45, .94) both;
        }

        @keyframes glitch-text {
            0% {
                transform: translate(0);
                filter: blur(0);
            }
            20% {
                transform: translate(-3px, 3px); /* Larger translation */
                filter: blur(1px); /* More blur */
            }
            40% {
                transform: translate(-3px, -3px);
                filter: blur(1px);
            }
            60% {
                transform: translate(3px, 3px);
                filter: blur(1px);
            }
            80% {
                transform: translate(3px, -3px);
                filter: blur(1px);
            }
            100% {
                transform: translate(0);
                filter: blur(0);
            }
        }

        /* Loading screen overlay */
        #loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--primary-bg);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            z-index: 1000;
            transition: opacity 0.5s ease-out;
            font-family: 'Roboto Mono', monospace;
            color: var(--accent-purple);
        }

        .loading-text {
            font-size: 1.8rem; /* Larger */
            animation: pulse 1.5s infinite alternate;
        }

        .loading-bar {
            width: 250px; /* Larger */
            height: 5px; /* Thicker bar */
            background-color: rgba(167, 139, 250, 0.3); /* Softer background */
            margin-top: 1rem;
            position: relative;
            overflow: hidden;
        }

        .loading-progress {
            width: 0%;
            height: 100%;
            background-color: var(--accent-purple);
            animation: load-progress 2s forwards;
        }

        @keyframes pulse {
            0% { opacity: 0.6; }
            100% { opacity: 1; }
        }

        @keyframes load-progress {
            0% { width: 0%; }
            100% { width: 100%; }
        }

        /* Iframe styling for document viewing */
        iframe {
            width: 100%;
            height: 80vh;
            border: 1px solid var(--accent-purple);
            border-radius: 0.25rem;
            margin-top: 1.5rem; /* More margin */
            background-color: #000; /* Black background for PDFs */
        }

        /* Custom button styles */
        .btn-nier {
            background-color: var(--accent-purple);
            color: var(--primary-bg);
            padding: 0.85rem 1.75rem; /* Larger padding */
            border-radius: 0.125rem; /* Sharper corners for buttons */
            font-family: 'Roboto Mono', monospace;
            font-weight: 600; /* Bolder text */
            transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.75rem; /* More gap */
            box-shadow: 0 0 8px rgba(167, 139, 250, 0.6);
            border: 1px solid var(--accent-purple);
        }
        .btn-nier:hover {
            background-color: var(--primary-text);
            color: var(--primary-bg);
            box-shadow: 0 0 15px rgba(167, 139, 250, 0.8);
            transform: translateY(-2px); /* Slight lift */
        }

        .btn-nier-secondary {
            background-color: transparent;
            color: var(--accent-purple);
            border: 1px solid var(--accent-purple);
            padding: 0.85rem 1.75rem;
            border-radius: 0.125rem;
            font-family: 'Roboto Mono', monospace;
            font-weight: 600;
            transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
        }
        .btn-nier-secondary:hover {
            background-color: var(--accent-purple);
            color: var(--primary-bg);
            border-color: var(--accent-purple);
            transform: translateY(-2px); /* Slight lift */
        }

        /* Navigation hover effect (purple accent) */
        .nav-item-hover:hover .nav-line {
            opacity: 1;
        }
        .nav-item-hover:hover .nav-text {
            color: var(--accent-purple);
        }

        /* Skill item hover effects (purple primary accent, cyan secondary) */
        .skill-item:hover {
            border-color: var(--accent-purple);
        }
        .skill-item:hover .skill-text {
            color: var(--accent-purple);
        }
        .soft-skill-item:hover {
            border-color: var(--secondary-accent-cyan);
        }
        .soft-skill-item:hover .skill-text {
            color: var(--secondary-accent-cyan);
        }