/* 1. BASE SYSTEM - Sets the dark retro terminal backdrop and aligns text left */
body {
    background-color: #000000f5 !important;
    color: #ffffff !important; 
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 25px;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: left !important;
}

/* Force the main container to center its own box layout while keeping internal text left-aligned */
.vhs-container {
    display: block !important; 
    width: calc(100% - 270px) !important; /* Forces container to stop right at the border line */
    max-width: 100% !important; 
    padding: 40px !important; 
    box-sizing: border-box !important;
    margin: 0 !important; /* Left aligned, no need to center anymore */
    animation: crt-turn-on 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
    overflow-x: hidden; /* Prevent horizontal accidental scrolling */
}

/* MOD: Pushes the image logo over to the right side and lets text wrap cleanly next to it */
.vhs-crt {
    filter: sepia(1) contrast(1) brightness(0.5) hue-rotate(10deg);
    float: right !important; 
    margin-top: 10px;
    margin-left: 0px !important; 
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.2);
}
.sidebar {
    /* 1. POSITIONING - Pins it completely freeze-frame to the screen viewport */
    position: fixed !important;
    top: 50% !important;               /* Moves it to the vertical middle of the screen */
    right: 0px !important;            /* Gaps it safely inward from the right bezel border */
    transform: translateY(-50%) !important; /* Perfect midpoint alignment offset adjustment */
    
    /* 2. BOX SIZE & LAYOUT CONTROLS */
    width: 271px !important;           /* Increased width so text strings like "PROJECTS" don't clip */
    height: 946px !important;            /* Let height scale naturally based on your links inside */
    box-sizing: border-box !important;
    
    /* 3. STYLING & DEPTH (Matches your retro terminal theme) */
    border: 1px solid #ffffff !important; 
    border-radius: 10px !important;
    padding:20px !important;              
    background-color: #0000006e !important; /* Mostly opaque black so scrolling content passes underneath invisibly */
    z-index: 999999 !important;            /* Guarantees it stays layered cleanly on top of everything */
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.15);
}
.vhs2 {
    filter: sepia(0.1) contrast(1) brightness(0.5) hue-rotate(10deg);
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.2);
}

/* 2. THE VHS OVERLAY & PHYSICAL MONITOR FRAME */
body::after {
    content: "" !important;
    display: block !important;
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    right: 270px !important;
    bottom: 0 !important;
    
    box-sizing: border-box !important;
    border: 1px solid #1a1a1a !important; 
    border-color: #ffffff #ffffff #ffffff #ffffff !important; 
    border-radius: 10px !important; 
    
    z-index: 999999 !important; 
    pointer-events: none !important; 
    
    animation: vhs-flicker 0.15s infinite !important;
}

/* Quick adjustment to make sure the outer bezel doesn't clip your content */
html, body {
    max-height: 100vh;
    box-sizing: border-box;
}

/* 3. CHROMATIC ABERRATION - White text with Red and Cyan tracking jumps */
.glitch-text {
    position: relative;
    display: inline-block;
    font-size: 3rem;
    color: #ffffff !important; 
    text-transform: uppercase;
    text-shadow: -3px 0 #ff00c1, 3px 0 #00fff0 !important;
    animation: vhs-tracking 2.5s infinite !important;
    margin-bottom: 20px;
}

nav {
    position: fixed !important;
    position: -webkit-fixed !important; /* Safari support */
    
    /* Coordinates - Pushed inward from the border */
    top: 50% !important;
    right: 45px !important;            /* Increased from 50px to stay clear of the bezel */
    transform: translateY(-50%) !important; 
    /* Structure & Spacing */
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;              /* Clean gap spacing between individual links */
    text-align: right !important;
    
    /* Box Margins & Padding Safeguards */
    padding: 5px !important;          /* Generates a safe internal layout zone */
    margin: 0 !important;
    
    /* Layering priorities */
    z-index: 1000000 !important; 
    pointer-events: auto !important; 
}

a {
    text-align: center !important;
    color: #00fff0 !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 2rem;
    text-shadow: -3px 0 #ff00c1;
    transition: all 0.5s ease;
    display: block !important;          /* Keeps links properly block-stacked */
    margin: 0 !important;               /* Resets default browser inline flow gaps */
}

a:hover {
    font-size: 27px;
    color: #ff00c1 !important;
    text-shadow: -2px 0 #00fff0;
    letter-spacing: 4px;                
}

/* Adds a terminal prompt marker on hover */
a:hover::before {
    font-size: medium;
    content: "> " !important;
    color: #00fff0 !important;
    text-shadow: 0 0 5px #00fff0;
}
h2, h3 {
    color: #ffffff !important;
    text-shadow: 0 0 5px rgba(255,255,255,0.4);
    text-align: left !important; 
}

/* 6. ANIMATIONS - The engine driving the VHS glitches */
@keyframes vhs-flicker {
    0% { opacity: 0.95; }
    50% { opacity: 1; }
    100% { opacity: 0.97; }
}

@keyframes vhs-tracking {
    0% { text-shadow: -3px 0 #ff00c1, 3px 0 #00fff0; transform: skew(0deg); }
    15% { text-shadow: -3px 0 #ff00c1, 3px 0 #00fff0; transform: skew(0deg); }
    16% { text-shadow: -8px 0 #ff00c1, 6px 0 #00fff0; transform: skew(4deg); } 
    17% { text-shadow: -3px 0 #ff00c1, 3px 0 #00fff0; transform: skew(0deg); }
    85% { text-shadow: -3px 0 #ff00c1, 3px 0 #00fff0; transform: skew(0deg); }
    86% { text-shadow: -6px 0 #ff00c1, 8px 0 #00fff0; transform: skew(-5deg); } 
    87% { text-shadow: -3px 0 #ff00c1, 3px 0 #00fff0; transform: skew(0deg); }
    100% { text-shadow: -3px 0 #ff00c1, 3px 0 #00fff0; transform: skew(0deg); }
}

@keyframes crt-turn-on {
    0% {
        transform: scale(1, 0.004) translateY(0);
        filter: brightness(30) contrast(3);
        opacity: 0;
    }
    40% {
        transform: scale(1, 0.004) translateY(0);
        filter: brightness(30) contrast(3);
        opacity: 1;
    }
    50% {
        transform: scale(1, 1) translateY(0);
        filter: brightness(5) contrast(2);
    }
    100% {
        transform: scale(1, 1) translateY(0);
        filter: brightness(2) contrast(1);
        opacity: 1;
    }
}