body {
    background-color: #111827;
    font-family: 'Courier Prime', monospace;
    color: #E5E7EB;
}

.vintage-box {
    border: 2px solid #374151;
    box-shadow: 4px 4px 0 #000000, -4px -4px 0 #374151;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.vintage-box:hover {
    border-color: #D97706;
    box-shadow: 0 0 10px rgba(217, 119, 6, 0.5), 4px 4px 0 #000000;
}

.os-accent-text {
    color: #D97706;
    text-shadow: 0 0 8px rgba(217, 119, 6, 0.4);
}

.os-flicker-animation {
    animation: flicker 0.1s infinite alternate;
}

@keyframes flicker {
    0% { opacity: 0.9; }
    5% { opacity: 0.85; transform: scaleX(1); }
    10% { opacity: 1; text-shadow: 0 0 10px rgba(217, 119, 6, 0.6); }
    15% { opacity: 0.7; transform: scaleX(0.98); }
    20% { opacity: 0.95; }
    100% { opacity: 0.9; }
}

.scanlines {
    background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 0.2) 50%
    );
    background-size: 100% 4px;
}

#neon-box {
    border: 4px solid #38bdf8;
    box-shadow: 0 0 10px #38bdf8, 0 0 40px #38bdf8;
    border-radius: 8px;
}

#loader-name-text {
    background: linear-gradient(90deg, #a78bfa, #38bdf8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 10px rgba(167, 139, 250, 0.6);
}

.timeline-container { position: relative; max-width: 1200px; margin: 0 auto; }

.timeline-container::after {
    content: ''; position: absolute; width: 2px; background-color: #374151; top: 0; bottom: 0; left: 50%; margin-left: -1px; z-index: 1;
}

.timeline-item { padding: 10px 40px; position: relative; width: 50%; z-index: 5; }
.timeline-item-right { left: 50%; }

.timeline-item::after {
    content: ''; position: absolute; width: 12px; height: 12px;
    background-color: #111827; border: 2px solid #D97706; top: 15px; border-radius: 50%; z-index: 10;
}

.timeline-item:nth-child(even)::after { right: -7px; }
.timeline-item:nth-child(odd)::after { left: -7px; }
.timeline-item-right::after { left: -7px !important; }

@media screen and (max-width: 768px) {
    .timeline-container::after { left: 20px; }
    .timeline-item { width: 100%; padding-left: 50px; padding-right: 10px; }
    .timeline-item-right { left: 0%; }
    .timeline-item::after { left: 14px !important; }
    .timeline-item:nth-child(even)::after { right: auto; }
}

.skill-bar-track {
    height: 8px;
    background-color: #374151;
    border: 1px solid #1f2937;
}

.skill-bar-fill {
    height: 100%;
    background-color: #D97706;
    transition: width 1s ease-out;
}


@media (max-width: 767px) {
    /* Show navigation links when checkbox is checked */
    #menu-toggle:checked + label + nav #nav-links {
        display: flex !important;
        /* Add fixed positioning for full viewport height coverage if needed for a proper menu */
        /* position: fixed; 
        height: calc(100vh - 4rem);  Adjust 4rem for header height */
    }
    
    /* Ensure header sticks and doesn't overlay content badly on small screens */
    #main-header { padding-right: 1rem; padding-left: 1rem; }

    /* Keep nav links full width when shown on mobile, and stack them */
    #nav-links { 
        flex-direction: column; 
        gap: 0; /* Tailwind gap-5 is already on the ul, let's control li/a padding */
        border-top: 1px solid var(--os-border); /* Re-emphasize the separator line */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5); /* Subtle shadow for menu depth */
    }
    
    #nav-links li { 
        width: 100%; 
        border-bottom: 1px solid #28303d; /* Separator between links on mobile */
    }
    
    #nav-links li:last-child {
        border-bottom: none;
    }

    #nav-links a { 
        display: block; 
        padding: 0.75rem 1rem; /* Increase padding for tap area */
        text-align: left; /* Align text left for better mobile reading */
    }
}

/* 2. Loader Name Text Size Adjustment (Very Small Screens) */
@media (max-width: 480px) {
    #loader-name-text { font-size: 1.5rem !important; } /* Adjusted from 1rem to 1.5rem for better visibility */
}

/* 3. Project Card Text Wrapping Improvement (Critical for long URLs/Text) */
.project-card p { word-break: break-word; }

/* 4. Timeline Dot/Line on Mobile (Ensuring vertical stacking looks clean) */
@media (max-width: 767px) {
    .timeline-container {
        /* Remove any center line or specific mobile positioning if used in style.css */
        /* If style.css relies on timeline-item-right/left for desktop, ensure they reset to 100% width/stacking on mobile */
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .timeline-item, .timeline-item-right {
        width: 100% !important; /* Override desktop width settings */
        padding: 0 !important; /* Remove any side padding for timeline alignment */
        margin: 0 !important; /* Remove any side margin */
        position: relative;
    }
    .timeline-content {
        /* Add a clear visual line/dot for mobile if not already in style.css */
        border-left: 3px solid #D97706; /* Simple vertical line for mobile timeline */
        padding-left: 1rem; /* Space for the line */
        margin-left: 10px; /* Offset the item slightly */
    }
}

/* 5. General Utility Enhancements (Ensuring text doesn't get too small or large) */
@media (min-width: 1024px) {
    /* Scale up main home title on large screens */
    #home-title { font-size: 72px; } 
}
@media (max-width: 640px) {
    /* Slightly reduce the size of section headings on small screens */
    .text-3xl { font-size: 28px; }
}

/* 6. Review Card Stacking for small devices */
@media (max-width: 640px) {
    .review-card {
        flex-direction: column;
        text-align: center;
    }
    .review-card .flex-shrink-0 {
        margin-bottom: 1rem;
    }
    .review-card .text-left {
        text-align: center;
    }
}