/* 80s Color Palette */
:root {
    --bg-dark: #120921; /* Dark, starry background */
    --neon-pink: #ff00ff;
    --neon-blue: #00ffff;
    --grid-line: #0a0a0a;
    --text-green: #00ff00; /* Classic terminal green */
}

/* Basic Setup and 80s Background Grid */
body {
    font-family: 'VT323', monospace; /* Apply retro font */
    line-height: 1.5;
    margin: 0;
    padding: 0;
    background-color: var(--bg-dark);
    color: var(--neon-blue);
    
    /* 80s Grid Pattern */
    background-image: 
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Logo and Header Styling (The "Sunset") */
header {
    background: linear-gradient(135deg, #FF7F50, #FF1493); /* Orange-to-pink sunset gradient */
    color: var(--bg-dark);
    padding: 3rem 1rem;
    text-align: center;
    box-shadow: 0 0 20px var(--neon-pink); /* Neon glow */
    border-bottom: 5px solid var(--neon-blue);
}

.logo {
    max-width: 250px;
    height: auto;
    margin-bottom: 1rem;
    /* Optional: If the logo is not already glowing, add a filter here */
    filter: drop-shadow(0 0 8px var(--neon-blue));
}

header h1 {
    margin-bottom: 0.25rem;
    font-size: 3.5rem;
    text-shadow: 4px 4px var(--neon-pink); /* 3D text effect */
}

.tagline {
    font-size: 1.5rem;
    margin-top: 0;
    color: var(--bg-dark);
}

/* Main Content and Sections (The "Terminal") */
main {
    max-width: 900px;
    margin: 3rem auto;
    padding: 0 1rem;
}

section {
    background: rgba(18, 9, 33, 0.7); /* Semi-transparent dark box */
    padding: 2rem;
    margin-bottom: 2rem;
    border: 2px solid var(--neon-blue); /* Terminal window border */
    box-shadow: 0 0 15px var(--neon-blue), inset 0 0 10px rgba(0, 255, 255, 0.5); /* Inner and outer glow */
    animation: flicker 1.5s infinite alternate; /* Subtle screen flicker effect */
}

section h2 {
    color: var(--neon-pink);
    border-bottom: 2px dashed var(--neon-pink);
    padding-bottom: 0.5rem;
    margin-top: 0;
    font-size: 2rem;
}

/* Text and Links */
section p {
    color: var(--text-green); /* Green text for a classic terminal feel */
}

a {
    color: var(--neon-pink);
    text-decoration: none;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.7);
}

a:hover {
    color: var(--neon-blue);
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
}

#contact ul {
    list-style: none;
    padding: 0;
}

#contact li {
    margin-bottom: 0.75rem;
}

/* Footer (The Console Bottom) */
footer {
    text-align: center;
    padding: 1rem;
    background: var(--bg-dark);
    color: var(--neon-blue);
    font-size: 1rem;
    border-top: 3px solid var(--neon-blue);
}

/* KEYFRAMES for the subtle screen flicker */
@keyframes flicker {
    0% { opacity: 1; }
    50% { opacity: 0.98; }
    100% { opacity: 1; }
}

/* Responsive adjustment for the mobile view */
@media (max-width: 600px) {
    header h1 {
        font-size: 2.5rem;
    }
    .logo {
        max-width: 150px;
    }
}

/* --- Navigation Styling (Appended to existing style.css) --- */

nav {
    margin-top: 1.5rem;
}

nav a {
    display: inline-block;
    color: var(--bg-dark); /* Dark text on the gradient header */
    text-decoration: none;
    font-size: 1.3rem;
    padding: 0.5rem 1.5rem;
    margin: 0 0.5rem;
    border: 2px solid var(--bg-dark);
    transition: all 0.3s ease;
    text-shadow: none; /* Remove neon text shadow in the nav bar for contrast */
}

/* Hover effect: Glow and color change */
nav a:hover {
    color: var(--neon-blue);
    background: var(--bg-dark);
    border-color: var(--neon-blue);
    box-shadow: 0 0 10px var(--neon-blue);
}

/* Active page indicator */
nav a.active {
    color: var(--neon-pink);
    background: var(--bg-dark);
    border-color: var(--neon-pink);
    box-shadow: 0 0 10px var(--neon-pink);
}