/* style.css */
:root {
    --svg-bg-fill-light: #8c8985; /* A subtle, slightly darker off-white for light mode SVG path */
    --svg-bg-fill-dark: #202B3F;  /* A subtle, slightly lighter dark blue/gray for dark mode SVG path */
    --svg-fill-opacity: 0.8; /* Increased opacity for the SVG path to make it more visible */
}

body {
    font-family: 'Lexend Deca', sans-serif;
    /* Base body background colors (fully opaque) are set by Tailwind utilities in HTML */
    /* e.g., bg-white dark:bg-slate-900 */
}

#svg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 0; /* Behind main content */
}

#mySVG {
    width: 1000%;
    height: 1000%;
    max-height: 3000px;
}

#mySVG #text1 {
    transition: fill 0.3s ease-in-out;
    fill-opacity: var(--svg-fill-opacity);
}

html:not(.dark) #mySVG #text1 {
    fill: var(--svg-bg-fill-light);
}

html.dark #mySVG #text1 {
    fill: var(--svg-bg-fill-dark);
}

main {
    position: relative; 
    z-index: 1;       
    background-color: transparent; /* Crucial: main element itself is transparent */
}

/* Sections INSIDE main will have their own semi-transparent backgrounds set by Tailwind utilities */
/* e.g. <section id="hero" class="bg-slate-50/95 dark:bg-slate-800/95 ..."> */


.nav-link {
    /* Tailwind classes used directly in HTML */
}
.nav-link-mobile {
    /* Tailwind classes used directly in HTML */
}

.content-section {
    padding-top: 4rem; 
    padding-bottom: 4rem; 
    padding-left: 1rem;  
    padding-right: 1rem;
    min-height: calc(100vh - 8rem); 
    scroll-margin-top: 4rem; 
}
@media (min-width: 640px) { /* sm */
    .content-section {
        padding-left: 1.5rem; 
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) { /* lg */
    .content-section {
        padding-left: 2rem; 
        padding-right: 2rem;
    }
}

header#main-header {
    position: sticky;
    top: 0;
    z-index: 50; 
    /* Background and blur handled by Tailwind classes in HTML (e.g. bg-white/80 dark:bg-slate-950/80) */
}

.log-entry {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom-width: 1px;
    /* border-color set by Tailwind class: border-slate-300 dark:border-slate-700 */
}

.log-entry:last-child {
    border-bottom-width: 0px;
    padding-bottom: 0px;
}

.experience-card {
    padding-bottom: 1.5rem; 
    margin-bottom: 1.5rem; 
    /* border-color set by Tailwind class: border-b border-slate-200 dark:border-slate-700 if used */
}
.experience-card:last-child {
    border-bottom-width: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.card {
    /* Styling primarily via Tailwind utility classes in HTML */
}

.tag {
     /* Styling primarily via Tailwind utility classes in HTML */
}

#profile-picture.is-visible {
    opacity: 1;
}