:root {

        --color-1: #F6F6F6; /* hsl (0, 0%, 96%) */
        --color-1sh: 0, 0%;
        --color-1l: 96%;

        --color-2: #20232F; /* hsl (228, 19%, 15%) */
        --color-2sh: 228, 19%;
        --color-2l: 15%;

        --color-3: #0B64F4; /* hsl (217, 91%, 50%) */
        --color-3sh: 217, 91%;
        --color-3l: 50%;

        --color-4: #07847c; /* hsl (176, 90%, 27%) */
        --color-4sh: 176, 90%;
        --color-4l: 27%;

        --color-5: #65adf6; /* hsl (210 89% 68%) */
        --color-5sh: 210, 89%;
        --color-5l: 68%;

        --color-6: #1bbd9c; /* hsl (168 75.2% 42.2%) */
        --color-6sh: 168, 75.2%;
        --color-6l: 42.7%;

        --base-color: hsl(var(--color-1sh), var(--color-1l));
        --text-color: hsl(var(--color-2sh), var(--color-2l));

        --bg-light: var(--base-color);
        --bg-dark: hsl(var(--color-1sh), calc(var(--color-1l) - 2%));
        --foreground: var(--text-color);

        --bg-nav: hsl(var(--color-1sh), calc(var(--color-1l) + 4%), 0.7);

        --overlay-bg: #FFFFFFBE;
        --over-foreground: #5A5A5A;

        --card: hsl(var(--color-1sh), calc(var(--color-1l) + 4%));

        --primary: var(--color-3);
        --primary-foreground: var(--base-color);
        --primary-glow: hsl(var(--color-3sh), calc(var(--color-3l) + 20%));
        --primary-subdued: hsl(var(--color-3sh), calc(var(--color-3l) - 20%));

        --secondary: var(--color-4);
        --secondary-foreground: var(--base-color);
        --secondary-hover: hsl(var(--color-4sh), calc(var(--color-4l) + 10%));

        --muted: hsl(var(--color-1sh), calc(var(--color-1l) - 10%));
        --muted-foreground: hsl(var(--color-2sh), calc(var(--color-2l) + 40%));

        --border: hsl(var(--color-1sh), calc(var(--color-1l) - 15%));
        --border-dark: hsl(var(--color-1sh), calc(var(--color-1l) - 30%));

        --bg-footer: hsl(var(--color-3sh), calc(var(--color-3l) + 40%));

        --shadow-color: rgba(0, 0, 0, 0.2);

        --text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.5);
        --text-gradient: linear-gradient(20deg, var(--primary), magenta);

        --shadow-sm: 2px 2px 5px 2px var(--shadow-color);
        --shadow: 3px 3px 10px 2px var(--shadow-color);
        --shadow-lg: 5px 5px 12px 2px var(--shadow-color);
        --shadow-nav: 0 4px 15px 2px var(--shadow-color);

        --radius: 1rem;
        --blur-4: blur(4px);
        --blur-8: blur(8px);
        --blur-16: blur(16px);

        --text-xl: clamp(2.2rem, 1.533rem + 3.556vw, 4.2rem);
        --text-lg: clamp(1.6rem, 1.233rem + 1.956vw, 2.7rem);
        --text-md: clamp(1.2rem, 1.067rem + 0.711vw, 1.6rem);
        --text-sm: clamp(0.5rem, 0.4rem + 0.534vw, 0.8rem);
    }

    .darkmode {

        --base-color: hsl(var(--color-2sh), calc(var(--color-2l) - 2%));
        --text-color: hsl(var(--color-1sh), calc(var(--color-1l) - 2%));

        --bg-dark: hsl(var(--color-2sh), calc(var(--color-2l) - 5%));

        --bg-nav: hsl(var(--color-2sh), calc(var(--color-2l) + 8%), 0.7);

        --overlay-bg: #0000009b;
        --over-foreground: #bababa;

        --card: hsl(var(--color-2sh), calc(var(--color-2l) + 1.5%));

        --primary: var(--color-5);
        --primary-glow: hsl(var(--color-5sh), calc(var(--color-5l) + 20%));

        --secondary: var(--color-6);
        --secondary-hover: hsl(var(--color-6sh), calc(var(--color-6l) + 10%));

        --muted: hsl(var(--color-2sh), calc(var(--color-2l) + 8%));
        --muted-foreground: hsl(var(--color-1sh), calc(var(--color-1l) - 42%));

        --bg-footer: #031a31;

        --border: hsl(var(--color-2sh), calc(var(--color-2l) + 13%));
        --border-dark: hsl(var(--color-2sh), calc(var(--color-2l) + 28%));

        --shadow-color: rgba(0, 0, 0, 0.4);
    }

    @font-face {
        font-family: "Poppins";
        src: url("/font/Poppins-Thin.woff2") format("woff2");
        font-weight: 100;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Poppins";
        src: url("/font/Poppins-Light.woff2") format("woff2");
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Poppins";
        src: url("/font/Poppins-Regular.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Poppins";
        src: url("/font/Poppins-Bold.woff2") format("woff2");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Poppins";
        src: url("/font/Poppins-Black.woff2") format("woff2");
        font-weight: 900;
        font-style: normal;
        font-display: swap;
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        transition:
            transform 0.3s ease,
            background-color 0.3s ease,
            color 0.2s ease,
            border-color 0.3s ease,
            box-shadow 0.3s ease;
    }

	html {
        font-family: 'Poppins', sans-serif;
        /* font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"; */
        font-size: 16px;
        scroll-behavior: smooth;
    }

    html:not(.theme-ready) * {
        transition: none !important;
    }

    body {
        background-color: var(--bg-light);
        color: var(--foreground);
        /* transition: background-color 0.5s, color 0.5s; */

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

        ul { list-style: none; }

        .text-xl { font-size: var(--text-xl); }
        .text-lg { font-size: var(--text-lg); }
        .text-md { font-size: var(--text-md); }
        .text-sm { font-size: var(--text-sm); }
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: 700;
        line-height: 1.2;
    }

    p {
        margin-top: 0.5rem;
        margin-bottom: 1rem;
        line-height: 1.3;
        color: var(--muted-foreground);
    }

    [data-animate] {
        opacity: 0;
        transition: transform 1s ease, opacity 1.5s ease;
    }

    [data-animate].show {
        opacity: 1;
        transform: translateX(0);
    }

    [data-animate="right"] {
        transform: translateX(100px);
    }

    [data-animate="left"] {
        transform: translateX(-100px);
    }

    [data-animate="bottom"] {
        transform: translateY(50px);
    }

    @media (width <= 963px) {
        [data-animate="left"],
        [data-animate="right"],
        [data-animate="bottom"] {
            transform: translateY(50px);
        }

        [data-animate="left"].show,
        [data-animate="right"].show,
        [data-animate="bottom"].show {
            transform: translateY(0);
        }
    }