@import url("Intro.css");
@import url("BackGround.css");
@import url("OverlayMenu.css");
@import url("NameContainer.css");
@import url("CursorDot.css");
@import url("LinkButton.css");
@import url("ScrollableBody.css");
@import url("Nav.css");
@import url("ProjectSlider.css?v=hybris-preview-1");
@import url("Boy&Girl.css");
@import url("MainHome.css?v=cv-arrow-3");
@import url("TechStack.css?v=tech-stack-3");

:root {
    --color-bg-main: #030316;
    --color-bg-card: #11121E;
    --color-bg-card-hover: #181A2A;

    --color-text-main: #F5F5F7;
    --color-text-secondary: #B8BAC8;
    --color-text-muted: #767A8A;

    --color-accent-primary: #8B5CF6;
    --color-accent-secondary: #EC4899;
    --color-accent-glow: rgba(139, 92, 246, 0.35);

    --color-border: rgba(255, 255, 255, 0.08);
}


html {
    overflow-x: hidden;
}
body {
    font-family: "Space Grotesk", Arial, sans-serif;
    position: relative;
    height: 100vh;
    width: 100vw;
    background: linear-gradient(to bottom, var(--color-bg-main), black);
    overflow: hidden;
    padding: 0;
    margin: 0;
}

body #scrollable_body h1 {
    font-family: sans-serif;
        margin: 0;
        color: var(--color-text-main);
        text-transform: uppercase;
        font-size: 18px;
        font-weight: bold;
}

body #scrollable_body h2 {
    font-family: sans-serif;
    margin: 0;
    color: var(--color-text-main);
    text-transform: uppercase;
    font-size: 64px;


}

body #scrollable_body h3 {
    font-family: sans-serif;
    margin: 0;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    font-size: 18px;
}

body #scrollable_body p {
    font-family: sans-serif;
    margin: 0;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

/* Final mobile override: loaded after every imported CSS file. */
@media (max-width: 768px) {
    #nav_name {
        display: none !important;
    }

    body #scrollable_body #home #home_title {
        font-size: clamp(2.15rem, 10.5vw, 3rem) !important;
        line-height: 0.92 !important;
        max-width: 82vw !important;
    }

    #main_home_overlay_text {
        top: 22% !important;
        left: 18px !important;
        right: auto !important;
        max-width: 82vw !important;
        transform: none !important;
    }

    #home_subtitle {
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
    }

    #developer_studio {
        transform: scale(0.88) !important;
        transform-origin: center center !important;
    }

    #main_home_cv_container {
        left: 18px !important;
        right: auto !important;
        bottom: 140px !important;
        transform: none !important;
    }

    .cv-btn {
        min-height: 0 !important;
        height: 36px !important;
        padding: 0 16px !important;
        border-width: 1px !important;
        font-size: 0.8rem !important;
        letter-spacing: 0.7px !important;
    }

    .link_buttons {
        margin-top: 20px !important;
        gap: 8px !important;
    }

    .link_button {
        width: 42px !important;
        height: 42px !important;
        font-size: 19px !important;
    }

    .project_track {
        gap: 16px !important;
    }

    .project_slider {
        min-height: 370px !important;
        padding-top: 70px !important;
        padding-bottom: 104px !important;
    }

    .project_card {
        flex: 0 0 64% !important;
        height: 235px !important;
    }

    .project_card h3 {
        flex-basis: 68px !important;
        font-size: 22px !important;
    }

    .project_drag_hint {
        bottom: 30px !important;
    }
}

@media (max-width: 480px) {
    .cv-btn {
        height: 34px !important;
        padding: 0 14px !important;
    }

    body #scrollable_body #home #home_title {
        font-size: clamp(2rem, 10vw, 2.55rem) !important;
    }

    #main_home_cv_container {
        bottom: 126px !important;
    }

    .project_card {
        flex-basis: 66% !important;
        height: 220px !important;
    }
}
/* Touch devices should not keep hover or active visual states stuck. */
@media (hover: none), (pointer: coarse) {
    .cv-btn:hover,
    .cv-btn:active {
        color: var(--color-text-main) !important;
        background: rgba(139, 92, 246, 0.08) !important;
        transform: none !important;
        box-shadow: 0 0 10px var(--color-accent-glow),
            inset 0 0 10px rgba(139, 92, 246, 0.12) !important;
    }

    .link_buttons:hover .link_button,
    .link_buttons .link_button:hover,
    .link_button:active {
        transform: none !important;
        opacity: 1 !important;
        background: var(--color-bg-card-hover) !important;
        box-shadow: none !important;
    }

    .project_card:hover,
    .project_card:active,
    .project_preview_link:hover,
    .project_preview_link:active,
    .project_preview_close:hover,
    .project_preview_close:active,
    .project_preview_arrow:hover,
    .project_preview_arrow:active,
    #overlay_button:hover,
    #overlay_button:active,
    #back_to_top:hover,
    #back_to_top:active {
        transform: none !important;
    }
}
/* Tech stack title override: keeps group headings from inheriting the generic h3 section style. */
body #scrollable_body .tech_group_title {
    margin: 0 0 22px;
    color: var(--color-text-main);
    font-family: "Space Grotesk", Arial, sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    body #scrollable_body .tech_group_title {
        font-size: 20px;
        margin-bottom: 20px;
    }
}