@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");
@import url("Boy&Girl.css");
@import url("MainHome.css");

: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);
}

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;
}