/* =========================================================
   VARIABLES
   Mohd Ali Akbar Portfolio
========================================================= */

:root{

    /* ==========================================
        Colors
    ========================================== */

    --bg-color:#0A192F;
    --surface-color:#112240;
    --surface-hover:#1A2F52;

    --primary-color:#CCD6F6;
    --secondary-color:#8892B0;

    --accent-color:#64FFDA;
    --accent-hover:#4EE8CB;

    --white:#FFFFFF;
    --black:#000000;

    --border-color:rgba(255,255,255,.08);

    --glass-bg:rgba(10,25,47,.75);

    /* ==========================================
        Fonts
    ========================================== */

    --heading-font:"Space Grotesk",sans-serif;

    --body-font:"Inter",sans-serif;

    /* ==========================================
        Font Sizes
    ========================================== */

    --fs-xs:.75rem;
    --fs-sm:.875rem;
    --fs-md:1rem;
    --fs-lg:1.125rem;
    --fs-xl:1.25rem;
    --fs-2xl:1.5rem;
    --fs-3xl:2rem;
    --fs-4xl:3rem;
    --fs-5xl:4rem;
    --fs-6xl:5rem;

    /* ==========================================
        Font Weight
    ========================================== */

    --fw-light:300;
    --fw-normal:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;

    /* ==========================================
        Width
    ========================================== */

    --container-width:1200px;

    /* ==========================================
        Header
    ========================================== */

    --header-height:80px;

    /* ==========================================
        Radius
    ========================================== */

    --radius-sm:6px;
    --radius-md:10px;
    --radius-lg:16px;
    --radius-xl:24px;
    --radius-round:999px;

    /* ==========================================
        Spacing
    ========================================== */

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-7:32px;
    --space-8:40px;
    --space-9:48px;
    --space-10:64px;
    --space-11:80px;
    --space-12:120px;

    /* ==========================================
        Shadow
    ========================================== */

    --shadow-sm:
        0 8px 20px rgba(0,0,0,.12);

    --shadow-md:
        0 15px 35px rgba(0,0,0,.20);

    --shadow-lg:
        0 25px 60px rgba(0,0,0,.35);

    /* ==========================================
        Transition
    ========================================== */

    --transition-fast:.25s ease;

    --transition:.35s ease;

    --transition-slow:.6s ease;

    /* ==========================================
        Z Index
    ========================================== */

    --z-header:1000;

    --z-menu:1100;

    --z-overlay:1200;

    --z-modal:1300;

    --z-loader:9999;

}

/* ==========================================
    Container
========================================== */

.container{

    width:min(92%,var(--container-width));

    margin:auto;

}

/* ==========================================
    Selection
========================================== */

::selection{

    background:var(--accent-color);

    color:var(--bg-color);

}

/* ==========================================
    Scrollbar
========================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--bg-color);

}

::-webkit-scrollbar-thumb{

    background:var(--surface-color);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--accent-color);

}