/* ... (Keep your existing CSS variables and body styles from the previous response) ... */
/* Basic Reset and Variables */
:root {
    --bg-color: #000033; /* Dark blue background */
    --text-color: #CCCCFF; /* Lighter blue/lavender general text */
    --accent-color: #66CCFF; /* A vibrant light blue accent for header/links */
    --card-bg: #000055; /* Slightly lighter blue for project cards */
    --typing-speed: 2.5s; 
    --blink-speed: 1s; 
}

/* ... (Keep the rest of your existing CSS styles below this point. 
     The rest of the code already uses these variables, so it will update automatically.) ... */

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    /* ... (rest of the body styles) ... */
}

/* ... (header h1, a, nav a, main, .project-grid, .project-item, footer styles remain the same) ... */

/* ... (typing and blinking keyframes remain

header h1 {
    color: var(--accent-color);
    /* Remove the old border-bottom style */
    padding-bottom: 0;
}

.typewriter-text {
    /* Required for the animation to work correctly */
    display: inline-block;
    overflow: hidden; /* Hides text as it's typed */
    white-space: nowrap; /* Prevents text from wrapping */
    border-right: 0.2em solid var(--accent-color); /* The thick C64-style cursor*/
    
    /* Typing animation */
    animation: 
        typing var(--typing-speed) steps(9, end) forwards, /* 9 steps for "DVideas" */
        blink-cursor var(--blink-speed) steps(1, end) infinite; /* Blinking cursor*/
    
    /* Make the cursor thicker like a C64 */
    border-right-width: 0.3em; 
    height: 1em; /* Ensure cursor height matches font size */
}

/* Keyframes for the typing effect (width from 0 to 100%) */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* Keyframes for the blinking cursor (opacity toggle) */
@keyframes blink-cursor {
    0%, 100% { border-color: transparent }
    50% { border-color: var(--accent-color) }
}