body {
    background-color: var(--bg-color);
    margin: 0;
    font-family: "Fira Code", monospace; /* Applied globally to be safe */
    transition: background-color var(--ripple-speed);
}
:root {
    /* LIGHT MODE (Default - Your original colors) */
    --bg-color: #d8d2c3;
    --box-bg: #cdc0af;
    --text-main: #8b6f5c;
    --text-highlight: #cc5500; /* Burnt Orange */
    --string-color: #38a023;
    --number-color: #293c92;
    --variable-color: #b718bd;
    --contact-color: #94471b;
    
    /* Animation Speed */
    --ripple-speed: 0.6s;
}
body.dark-mode {
    --bg-color: #323437;       /* Monkeytype Dark Grey */
    --box-bg: #2c2e31;         /* Slightly darker for boxes */
    --text-main: #d1d0c5;      /* Off-white text */
    --text-highlight: #e2b714; /* Monkeytype Yellow */
    --string-color: #38a023;   /* Red/Pink */
    --number-color: #d1d0c5;
    --variable-color: #8514e2;
    --contact-color: #e2b714;
}
ul.navBar {
    /* 1. Add space around the outside (Top/Bottom: 20px, Left/Right: 40px) */
    /* This pushes the edges "away" from the screen border */
    margin: 20px 40px; 

    /* 2. Round the corners so it looks like a floating capsule */
    border-radius: 15px;

    /* 3. Keep your existing flex layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding: 10px 30px; /* Internal spacing */
    background-color: var(--box-bg);
    position: relative;
    
    /* Optional: Add a max-width so it doesn't get too wide on huge monitors */
    max-width: 1800px; 
    
    /* Optional: Center the bar itself if you use max-width */
    margin-left: auto;
    margin-right: auto;
    width: auto; /* Ensures it respects the margins */
}
/* CHANGE .home TO #home because you used id="home" in HTML */
#home {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    font-family: "Fira Code", monospace;
    font-size: 1.35em;
    color: var(--text-main);
}
#darkMode button {
    padding: 5px 10px;
    background-color: var(--text-main);
    border-radius: 5px;
    color: var(--bg-color); /* Contrast text against button */
    border: none;
    cursor: pointer;
    font-family: "Fira Code", monospace;
    transition: background-color 0.3s, color 0.3s;
    font-weight: bold;
    z-index: 100; /* Ensure it stays clickable */
}
#darkMode button:hover {
    opacity: 0.8;
}
#prof-pcis {
    text-align: center;
    width: 450px;
    height: auto;
    margin: 0;                 /* Margin handled by wrapper gap/centering */
    background-color: var(--box-bg);
    padding: 20px;  
    border-radius: 15px;
    box-sizing: border-box;    /* Ensures padding doesn't expand width */
}
#main-content{    
    max-width: 6000px;    /* Stops it from getting wider than 600px */
    width: 70%;
    height: fit-content;          /* On small phone screens, it takes up 90% of space */
    margin: 30px 20px;   /* 30px top/bottom space, 'auto' centers it left/right */
    
    /* Keep your existing styling (background, padding, etc.) */
    background-color: var(--box-bg);
    font-family: "Fira Code", monospace;
    font-size: large    ;
    padding: 40px 60px ;
    box-sizing: border-box;
    border-radius: 15px; /* Adds rounded corners to look smoother */
}
.content-wrapper {
    display: flex;             /* VITAL: Puts Profile and Code side-by-side */
    justify-content: center;   /* Centers the group on screen */
    gap: 20px;
    align-items: flex-start;
    margin-top: 30px;
    flex-wrap: nowrap;         /* Force desktop side-by-side layout */
}

/* Mobile responsive - only wrap on small screens */
@media (max-width: 900px) {
    .content-wrapper {
        flex-wrap: wrap;
    }
}

.file-name {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--text-main);
    margin-bottom: 10px;
    display: block;
}
.code-lines {
    color: var(--text-main);
    padding: 20px 20px 20px 40px;
    margin: 0;
    list-style: decimal;
}
#profile-pic {
    width: 300px;
    height: auto;
    border-radius: 10px;
    border: 2px solid var(--text-main);
}
#profile-name {
    margin-top: 15px;
    font-size: 1.5em;
    color: var(--text-main);
    font-weight: bold;
}

/* 6. Line Numbers Styling */
.code-lines li::marker {
    color: var(--text-main);
    opacity: 0.6;
}

/* 7. Syntax Highlighting Colors */
.keyword { color: var(--text-highlight); font-weight: bold; }
.string { color: var(--string-color); }
.number { color: var(--number-color); }
.variable { color: var(--variable-color); }
.contacts { color: var(--contact-color); }

#contact img {
    width: 40px;
    height: auto;
    display: inline-block;
    margin: 15px 10px 0 10px;
}
.ripple-circle {
    position: fixed;
    border-radius: 50%;
    transform: scale(0);
    pointer-events: none;
    z-index: 9999;
    animation: ripple-expand var(--ripple-speed) ease-out forwards;
}

@keyframes ripple-expand {
    to {
        transform: scale(1); 
    }
}

.theme-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999999;
    clip-path: circle(0px at var(--click-x) var(--click-y));
}

.theme-transition-overlay.expanding {
    animation: overlay-expand 0.6s ease-out forwards;
}

@keyframes overlay-expand {
    from {
        clip-path: circle(0px at var(--click-x) var(--click-y));
    }
    to {
        clip-path: circle(var(--end-radius) at var(--click-x) var(--click-y));
    }
}

/* Theme layer that covers entire page and reveals with clip-path */
.theme-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    clip-path: circle(0% at 50% 50%);
    transition: none;
}

.theme-layer.expanding {
    animation: clip-expand 0.8s ease-out forwards;
}

@keyframes clip-expand {
    to {
        clip-path: circle(150% at var(--click-x) var(--click-y));
    }
}

/* Clone of the entire page styling for theme layer */
.theme-layer.light-layer {
    background-color: #d8d2c3;
}

.theme-layer.dark-layer {
    background-color: #323437;
}

.theme-clone {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* View Transitions API - Circular wave theme transition */
::view-transition-old(root) {
    animation: none;
    z-index: 9999;
}

::view-transition-new(root) {
    animation: circle-reveal 0.6s ease-out;
    z-index: 99999;
}

@keyframes circle-reveal {
    from {
        clip-path: circle(0px at var(--click-x, 50%) var(--click-y, 50%));
    }
    to {
        clip-path: circle(var(--max-radius, 150vmax) at var(--click-x, 50%) var(--click-y, 50%));
    }
}

#darkmode{
    padding: 5px 10px;
    background-color: var(--text-main);
}
#line{
    padding: 2px 2px 2px;
    background-color:var(--bg-color);
}