:root {

    --bg-dark: #000000; /* Pure Black Background */

    --sidebar-bg: #0a0a0a;

    --accent-blue: #add8e6;

    --text-dim: #c9d1d9;

    --border: #30363d;

}



body {

    margin: 0;

    color: var(--text-dim);

    font-family: 'Segoe UI', sans-serif;

    background-color: var(--bg-dark);

}



/* --- LOADER --- */

#loader-wrapper {

    position: fixed;

    top: 0; left: 0; width: 100%; height: 100%;

    background: #000000;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 9999;

    transition: opacity 1s ease, visibility 1s;

}



.chart-container {

    position: relative;

    width: 300px; /* Graph size increased */

    height: 150px;

    margin: 0 auto 30px;

}



.axis { position: absolute; background: #333; }

.x-axis { width: 100%; height: 1px; bottom: 0; }

.y-axis { width: 1px; height: 100%; left: 0; }



.line-chart polyline {

    stroke-dasharray: 1000;

    stroke-dashoffset: 1000;

    animation: drawLine 2.5s infinite alternate ease-in-out;

}



@keyframes drawLine { to { stroke-dashoffset: 0; } }



#loader-text {

    color: var(--accent-blue);

    font-family: monospace;

    font-weight: bold;

    letter-spacing: 5px;

    text-align: center;

}



.pop-word {

    position: absolute;

    font-weight: 900;

    pointer-events: none;

    animation: popAndFade 1s forwards;

}



@keyframes popAndFade {

    0% { transform: scale(0.5); opacity: 0; }

    50% { opacity: 1; }

    100% { transform: scale(1.2); opacity: 0; }

}



.loader-hidden { opacity: 0; visibility: hidden; pointer-events: none; }



/* --- MAIN LAYOUT --- */

.wrapper {

    display: flex;

    max-width: 1400px;

    margin: 0 auto;

    min-height: 100vh;

    background-color: var(--bg-dark);

}



header {

    width: 300px;

    background-color: var(--sidebar-bg);

    padding: 60px 30px;

    border-right: 1px solid var(--border);

    height: 100vh;

    position: sticky;

    top: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

}



section { flex: 1; padding: 60px 80px; }



.profile-img {

    width: 150px; height: 150px;

    border-radius: 50%;

    border: 2px solid var(--accent-blue);

    object-fit: cover;

    margin-bottom: 40px;

}



/* --- FIXED SHINING HEADINGS --- */

h1, h2, h3 {

    color: var(--accent-blue) !important;

    text-transform: uppercase;

    letter-spacing: 2px;

    background: linear-gradient(90deg, #add8e6, #ffffff, #add8e6);

    background-size: 200% auto;

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: shineEffect 3s linear infinite;

    display: inline-block; /* Essential for background-clip */

}



@keyframes shineEffect {

    to { background-position: 200% center; }

}



.info-label { display: block; color: #8b949e; font-size: 0.7rem; text-transform: uppercase; margin-top: 20px; }

.social-link { color: var(--accent-blue); text-decoration: none; font-weight: bold; }



.btn-cv {

    display: block; width: 100%; margin-top: 40px; padding: 15px;

    border: 1px solid var(--accent-blue);

    color: var(--accent-blue); text-decoration: none;

    text-align: center; font-weight: bold; letter-spacing: 1px;

}



.btn-cv:hover { background: var(--accent-blue); color: #000; }



@media (max-width: 1000px) {

    .wrapper { flex-direction: column; }

    header { width: 100%; height: auto; position: relative; border-bottom: 1px solid var(--border); }

}