:root {
    --rail-top: lightgrey;
    --rail-bottom: rgb(192, 192, 192);
    --window-bg: #eeeeee;
    --text: rgb(26, 26, 26);
    --link: rgb(0, 123, 255);

    --bg: #121212;
    --red: #ff5f56;
    --yellow: #ffbd2e;
    --green: #27c93f;

    --gap: 16px;
    --min: 48px;
    --max: 96px;

}


* {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

body {
    background: var(--bg);
    min-height: 100vh;
    margin: 0;
    padding: 0;
    gap: 2em;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;

    box-sizing: border-box;
    overflow-x: hidden;
}

p,
h1,
h2,
h3 {
    margin: 0;
    padding: 0;
}

a {
    color: var(--link);
    text-decoration: none;
}

.window {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--rail-bottom);
    border-radius: 5px;
    background: var(--window-bg);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.746);
    z-index: 2;
    overflow: hidden;
}

.menubar {
    z-index: 12;
    top: 0;
    width: 100%;
    height: fit-content;
    background: linear-gradient(to bottom, black 20%, rgba(0, 0, 0, 0));

    padding-left: 2em;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2em;
    justify-content: flex-start;
    box-sizing: border-box;
    position: fixed;
}

.menubar p {
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    transition: 0.2s;
    margin-top: 10px;
    margin-bottom: 10px;

}


.mobile-menubar {
    display: none;
}

.menubar p:hover {
    background: rgba(255, 255, 255, 0.2);
    transition: 0.2s;
    cursor: pointer;
}


.welcome-section {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    justify-content: center;
    padding: 20px;

    top: 0;
    height: 70vh;
    min-height: 500px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;

    position: relative;
    background-image: url(assets/pink.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: 1;
}


.small {
    width: 20vw;
    max-height: 30vh;
    min-width: 300px;
    max-width: 800px;
    left: 30vw;
    position: absolute;
    top: 15vh;

}


.window .profile-pic {
    object-fit: contain;
    height: 100%;
}

.large {
    width: 30vw;
    min-width: 500px;
    max-width: 1000px;
    position: absolute;
    top: 40vh;
    left: 40vw;
}

.medium {
    width: 30vw;
    min-width: 400px;
    max-width: 900px;
    height: fit-content;
    color: var(--text);
}

.fadeout {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    background: linear-gradient(to top, var(--bg), rgba(238, 238, 238, 0));
    z-index: 1;
}

.railing {
    width: 100%;
    top: 0;
    height: 25px;
    background: linear-gradient(to bottom, var(--rail-top), var(--rail-bottom));
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
    box-sizing: border-box;

}

.nav-buttons {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.nav-button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.31);
    transition: 0.2s;

}

.nav-button:hover {
    filter: brightness(1.2);
    transition: 0.2s;
}

.nav-button.red {
    background: radial-gradient(circle at 50% 30%, #ff0000, #da251b);
}

.nav-button.green {
    background: radial-gradient(circle at 50% 30%, #ffdb28, #ffcc22);
}

.nav-button.yellow {
    background: radial-gradient(circle at 50% 30%, #78ff02, #13cd51);
}


.window-content {
    padding: 20px;
    box-sizing: border-box;
    font-size: 1.2em;
    line-height: 1.6em;
}


.window-content h2 {
    color: var(--text);
    margin: 10px;
}

.projects {
    display: flex;
    flex-direction: column;
    margin-top: 20em;
    width: 70vw;
    color: white;
    gap: 6em;
}

.lead-scroll {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: white;
    cursor: pointer;
    font-size: 1em;
    transition: 0.3s;

    background: radial-gradient(circle, rgba(0, 0, 0, 0.43) 0%, rgba(0, 0, 0, 0) 55%);
    position: absolute;
    top: 85vh;
    z-index: 11;
}


.lead-scroll:hover {
    transform: translateY(5px);
    transition: 0.3s;
}

.project-container {
    color: white;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 4em;
    align-items: center;
    justify-content: center;

    width: 100%;
    margin: 20px 0px;
}


.grid-col-2 {
    grid-column: span 2;
}

.project-container span {
    display: flex;
    flex-direction: column;
    gap: 2em;

}

.github,
.demo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background: linear-gradient(to bottom, white, #dcdcdc);
    font-size: 1em;
    cursor: pointer;
    transition: 0.2s;
}

.github {
    background: linear-gradient(to bottom, white, #dcdcdc);
    color: var(--text);
}

.demo {
    background: linear-gradient(to top, var(--link), rgb(66, 156, 253));
    color: white;
}

button:hover {
    transition: 0.2s;
    filter: brightness(1.1);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.072);

}

.description {
    font-size: 1.5em;
}

.title {
    font-size: 2em;
    font-weight: bold;
}

.tech-stack {
    background-color: var(--bg);
    padding: 5px 10px;
    border-radius: 5px;
    width: fit-content;
    color: var(--link);
    border: 1px solid var(--link);
    font-size: 0.9em;
}

.flex-row {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.flex-row.buttons{
    flex-direction: column;
}

.grid-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    align-items: center;
    justify-content: center;
}

.flex-row button {
    width: 100%;
}

.flex-column {
    display: flex;
    flex-direction: column;
    gap: 1em;
}



/* glass shelf (optional) */
.dock-base {
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, rgba(115, 115, 115, 0.791), rgba(115, 115, 115, 0.233));
    transform: perspective(5px) rotateX(1deg);
    border-radius: 10px;
    position: absolute;
    bottom: -10px;
    z-index: 2;


}

.dock {
    width: clamp(480px, 80vw, 1100px);
    margin: 0;
    display: grid;
    gap: 8px;
    justify-items: center;
    align-items: center;

    position: relative;
}

.icons {

    width: 100%;
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 5px;
    align-items: end;
    justify-items: center;

    /* Important: allow visual scaling to escape without creating scrollbars */
    overflow: visible;
    /* layout stays within .dock width */
}

.icon-container {
    /* Every slot is a square, consistent across grid */
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;

    z-index: 3;
}

.icon {
    width: 7vw;
    max-width: 75px;
    height: 7vw;
    max-height: 75px;
    border-radius: 22%;
    transform-origin: bottom center;
    transition: transform .08s linear;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35));

    display: flex;
    align-items: end;
    justify-content: center;

    transform: translateZ(0) scale(var(--s, 1));
    transition: transform 80ms linear;
    will-change: transform;

}

.icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* Labels */
.icon-container p {

    margin: 4px 0 0 0;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
    position: absolute;
    bottom: -1.8em;
}

.icon-container[data-active="1"] p,
.icon-container:hover p {
    opacity: 1;
}

/* Example hover scale (no layout shift) */
.icon-container:hover .icon {
    transform: scale(1.3);
}





.carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    /* set your preferred ratio */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
    background: #111;

    /* fallback while images load */
}

.carousel.right {
    transform: perspective(200px) rotateY(-1deg);
}

.carousel.left {
    transform: perspective(200px) rotateY(1deg);
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(.98);
    transition: opacity .35s ease, transform .35s ease;

}

.slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* dots */
.dots {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.carousel .dots:empty {
    display: none;
}


.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.758);
     transition: 0.1s;
}

.dot.is-active {
    background: var(--link);
    transform: scale(1.4);
    transition: 0.1s;
}


.dot:hover {
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.758);

}

.resume-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    padding: 10px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}


.resume-buttons button,
.contact-buttons button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: 0.2s;
    box-sizing: border-box;

}

.contact-buttons {
    width: 100%;
    padding: 10px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.cv {
    background: linear-gradient(to top, var(--link), rgb(66, 156, 253));
    color: white;
}

.no-cv {
    background: linear-gradient(to bottom, rgb(219, 219, 219), #d4d4d4);
    color: var(--text);
}

.resume-section {
    margin: 10em 0px;
    margin-bottom: 3em;
    display: flex;
    width: 100%;
    height: 60vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}


.desktop-icon {
    height: 150px;
    width: 150px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    z-index: 1;

}

.desktop-icon p {
    color: rgb(203, 203, 203);
    font-size: 1em;
}

.desktop-icon img {
    height: 70px;
    width: 70px;
    object-fit: contain;
}


.pos1 {
    top: 0%;
    left: 20%;
}

.pos2 {
    top: 30%;
    right: 20%;
}

.pos3 {
    bottom: 0%;
    left: 50%;
}

.pos5 {
    left: 5%;
    bottom: 2%;
}

.pos6 {
    right: 10%;
    top: 0%;
}


.contact-section {
    margin-bottom: 10em;
    display: flex;
    width: 100%;
    height: 60vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}


.pop-up {
    position: absolute;
    width: 40vw;
    height: fit-content;
    min-width: 300px;
    max-width: 500px;
}

.back1 {
    top: 40%;
    left: 30%;
    z-index: 2;
}

.back2 {
    top: calc(40% + 20px);
    left: calc(30% + 20px);
    z-index: 3;
}

.front {
    top: calc(40% + 40px);
    left: calc(30% + 40px);
    z-index: 4;
}

.cat {
    position: absolute;
    width: 20vw;
    height: 20vw;
    min-width: 200px;
    max-width: 600px;

}

.cat img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}


/* Only hide/animate when JS is present */
/* Hide popups by default */
.pop-up {
    opacity: 0;
    visibility: hidden;
}

/* When JS is detected, prep for animation */
.js .pop-up {
    transform: translateY(14px) scale(0.985);
    filter: blur(2px);
    transition:
        opacity 420ms cubic-bezier(.22, .61, .36, 1),
        transform 420ms cubic-bezier(.22, .61, .36, 1),
        filter 420ms cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform, filter;
}

/* Make them appear when visible */
.js .pop-up.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
}

.window.terminal {
    display: none;
    background-color: var(--bg);
}


footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    background-color: var(--window-bg);
    width: 100vw;
    max-width: 500px;
    padding: 20px;
    box-sizing: border-box;
    align-items: start;

}


footer .window {
    margin-bottom: 2em;
}

footer span {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: start;

}


.margin-bottom {
    margin-bottom: 2em;
}

footer span p {
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
    transition: 0.2s;
    justify-self: start;
    background: linear-gradient(to bottom, rgb(219, 219, 219), #d4d4d4);
    color: var(--text);
    width: 100%;
    box-sizing: border-box;


    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: row;
    gap: 1em;
}

span a {
    width: 100%;
}



span p:hover {
    filter: brightness(1.1);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    transition: 0.2s;
}

span h3 {
    color: rgb(107, 107, 107);
    font-weight: 500;
}


@media (max-width: 1000px) {

    /* Make the fixed menubar usable on smaller screens:
     - Allow horizontal scroll if items overflow
     - Reduce gaps/padding so it fits more easily */
    .menubar {
        gap: 1em;
        padding-left: 1em;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Reduce overall spacing in Projects section */
    .projects {
        width: 90vw;
        /* more breathing room on smaller screens */
        gap: 8em;
        margin-top: 14em;
    }

    .project-container {
        font-size: 0.9em;
    }

    .railing p {
        font-size: 0.7em;
    }

    /* Tablet: project grid becomes 2 columns (text + media) for readability */
    .project-container {
        grid-template-columns: 1fr 1fr;
        gap: 1.25em;
    }

    /* Ensure a "span 2 columns" element doesn't overflow on smaller grids */
    .grid-col-2 {
        grid-column: auto;
    }

    /* Slightly reduce large text sizes to prevent wrapping hell */
    .title {
        font-size: 1.7em;
    }

    .description {
        font-size: 1.2em;
    }

    /* Dock: fit within narrow widths; shrink icon size & spacing a bit */
    :root {
        --icon-size: 60px;
        --gap: 12px;
    }



    /* Welcome section windows: nudge positions so they don't run off-screen */
    .small {
        left: 10vw;
    }

    .large {
        left: 15vw;
    }


    .dock {
        width: 95vw;
    }


    .flex-row.buttons {
        flex-direction: column;
    }
}


@media (max-width: 700px) {

    /* Use safe area for iOS notches and reduce visual density */
    body {
        padding-top: env(safe-area-inset-top, 0);
    }

    /* Menubar: tighter layout + better tap targets */
    .menubar {
        display: none;
    }

    .margin-bottom {
        margin-bottom: 0em;
    }

    footer {
        width: 100vw;
        max-width: 700px;
    }

    .mobile-menubar {
        display: flex;
        flex-direction: column;
        z-index: 12;
        top: 0;
        width: 100%;
        height: fit-content;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 90%, rgba(0, 0, 0, 0));

        align-items: start;
        justify-content: space-between;
        position: fixed;
        padding-bottom: 2em;

    }

    .mobile-menubar.hidden {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0));
        padding-bottom: 0px;
    }

    .mobile-menubar p {
        color: white;
        padding: 10px 15px;
        border-radius: 5px;
        transition: 0.2s;
        font-size: 1.2em;
        margin: 0.5em;
        box-sizing: border-box;
    }

    .mobile-menubar p:hover,
    .mobile-toggle:hover {
        background: rgba(255, 255, 255, 0.2);
        transition: 0.2s;
        cursor: pointer;
    }

    .menubar-option {
        display: flex;
        flex-direction: column;
        gap: 1em;
        margin-top: 1em;
        transition: 0.2s;
    }

    .menubar-option.hidden {
        height: 0px;
        overflow: hidden;
        margin: 0px;
        gap: 0px;
        transition: 0.2s;
    }

    .mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: 1em;
        color: white;
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 1.2em;
        margin: 0.5em;
        box-sizing: border-box;

    }

    .medium {
        width: 90vw;
        min-width: 100px;
        max-width: 900px;
        height: fit-content;
        color: var(--text);
    }

    .welcome-section {
        height: 70vh;
        min-height: 750px;
        display: flex;
        flex-direction: column;
        gap: 1em;
        justify-content: start;
    }

    .window {
        display: flex;
        flex-direction: column;
        border: 2px solid var(--rail-bottom);
        border-radius: 5px;
        background: var(--window-bg);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.746);
        z-index: 2;
        overflow: hidden;
    }

    .small {
        margin-top: 5em;
        padding: 0;
        width: 200px;
        height: 200px;
        min-width: 100px;
        max-width: 800px;
        position: static;
    }


    .large {
        width: 80vw;
        min-width: 100px;
        max-width: 1000px;
        top: 250px;
        align-self: center;
        box-sizing: border-box;


    }


    .window.terminal {
        display: flex;
        background-color: var(--bg);
        bottom: 0px;
        position: absolute;
        width: 80vw;
        height: 300px;
        right: 0px;
        align-self: flex-end;
    }

    .terminal-text {
        color: rgb(0, 255, 0);
        padding: 20px;
        box-sizing: border-box;
        font-family: monospace;
        font-size: 1em;
    }

    .animated-text {
        /* optional typography */
        font-weight: 700;
        letter-spacing: .5px;

        /* gradient text */
        background: linear-gradient(90deg,
                #37ff00, #00f2ff, #37ff00);
        background-size: 600% 900%;
        /* gives room to move */
        background-clip: text;
        -webkit-background-clip: text;
        /* Safari */
        color: transparent;
        -webkit-text-fill-color: transparent;
        /* Safari */

        /* animation */
        animation: moveGradient 6s linear infinite;
    }

    @keyframes moveGradient {
        0% {
            background-position: 0% 50%;
        }

        100% {
            background-position: 100% 50%;
        }
    }

    .terminal-text p {
        font-weight: bold;
        font-family: monospace;
        font-size: 1em;
    }

    .terminal-text h3 {
        margin: 10px 0px;
        font-family: monospace;
    }

    .window .profile-pic {
        object-fit: contain;
        height: 100%;
    }


    /* Make profile image behave nicely in a stacked card */
    .window .profile-pic {
        width: 100%;
        height: auto;
        object-fit: contain;
    }





    .lead-scroll {
        position: static;
        margin: 10px 0 0;
        padding: 20px 12px;
    }

    /* Projects: single-column stacking for maximum clarity */
    .project-container {
        grid-template-columns: 1fr;
        padding: 20px;
        background: linear-gradient(to top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
        border-radius: 20px;
        box-sizing: border-box;
        width: 95vw;
        margin: 0px;
        gap: 3em;
        font-size: 1em;

    }


    .railing p {
        font-size: 1em;
    }

    .tech-stack {
        background-color: transparent;
    }

    .project-container button {
        border-radius: 10px;
    }

    /* Always show pictures first, text second */
    .project-container>.carousel {
        order: 1;
    }

    .project-container>span {
        order: 2;
    }

    .project-container span {
        gap: 1.25em;
    }

    .projects {
        gap: 1em;
        width: 100vw;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
    }

    /* Carousels: keep aspect consistent, remove perspective tilt on mobile */
    .carousel {
        width: 100%;
        aspect-ratio: 16/10;
        transform: none !important;

    }

    button.dot {
        width: 15px;
        height: 15px;
    }

    .dots {
        gap: 2em;
    }



    /* Buttons full-width on small screens for easier tapping */
    .flex-row {
        flex-wrap: wrap;
        gap: 0.75em;
        align-items: center;
        justify-content: center;
    }

    .flex-row button,
    .resume-buttons button,
    .contact-buttons button {
        width: 100%;
        padding: 12px 16px;
        font-size: 1rem;
    }

    .grid-rows {
        grid-template-columns: 1fr;
    }

    .grid-rows .tech-stack {
        margin-inline: auto;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
    }

    .resume-buttons {
        grid-template-columns: 1fr;
        /* stack CV + Contact */
    }





    .expand-menubar {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        padding: 20px;
        box-sizing: border-box;
    }

    /* DOCK */

    .dock {
        display: none;
    }





    /* Resume section: reduce vertical space & de-clutter desktop icons */
    .resume-section {
        height: 60vh;
        margin: 10em 0px;
    }

    .desktop-icon {
        height: 110px;
        width: 110px;
        gap: 4px;
    }

    .desktop-icon img {
        height: 56px;
        width: 56px;
    }

    .desktop-icon p {
        font-size: 0.85em;
    }

    /* Either hide extra icons or tuck them to edges to avoid overlaps */

    .pos2 {
        top: 10vh;
        right: 5vw;
    }

    .pos1 {
        left: 5%;
        top: 0;
    }


    .contact-section {
        height: auto;
        margin-bottom: 6em;
    }


    .cat {
        width: 44vw;
        height: 44vw;
        min-width: 0;
        max-width: none;
    }

    .pos5 {
        left: 2%;
        bottom: 0;
        width: fit-content;
    }

    .pos6 {
        right: 2%;
        top: 0;
        width: fit-content;
    }

    /* If still too busy, hide one cat (uncomment if desired) */
    /* .pos6 { display: none; } */



    .contact-section {
        position: relative;
        padding: 20em 0px;
        width: 100%;
        overflow: hidden;
        margin-top: 5em;
    }

    /* Popups: full-width cards, stacked with readable spacing */
    .pop-up {

        width: 80vw;
        max-width: none;
        height: auto;


    }

    .back1 {
        position: absolute;
        top: 25%;
        margin-top: 16px;
        left: 5vw;
    }

    .back2 {
        position: absolute;
        top: 35%;
        margin-top: 12px;
        left: 8vw;

    }

    .front {
        position: absolute;
        top: 40%;
        margin-top: 12px;
        left: 10vw;
    }

    /* Window chrome: tighter bar for small screens */
    .railing {
        height: 24px;
        padding: 8px 10px;
    }

    .nav-button {
        width: 10px;
        height: 10px;
    }

    /* Text sizing adjustments for readability on small screens */
    .window-content {
        font-size: 1rem;
        line-height: 1.5;
        padding: 14px;
    }

    .title {
        font-size: 1.4em;
    }

    .description {
        font-size: 1.05em;
    }

    /* Tech stack chips: slightly smaller + wrap */
    .tech-stack {
        font-size: 0.85em;
        padding: 4px 8px;
    }

    .flex-row {
        row-gap: 0.5em;
    }
}

/* =========================
   ♿ Motion-sensitive users
   ========================= */
@media (prefers-reduced-motion: reduce) {

    /* Avoid big transitions on mobile and desktop alike */
    * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}