@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:wght@200..900&display=swap');
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
    --background: oklch(0.9674 0.0013 286.3752);
    --foreground: oklch(0.2336 0.0180 62.9528);
    --card: oklch(1.0000 0 0);
    --card-foreground: oklch(0.2336 0.0180 62.9528);
    --popover: oklch(1.0000 0 0);
    --popover-foreground: oklch(0.2336 0.0180 62.9528);
    --primary: oklch(0.5850 0.1080 256.6706);
    --primary-foreground: oklch(0.9674 0.0013 286.3752);
    --secondary: oklch(0.4939 0.0737 255.8874);
    --secondary-foreground: oklch(0.9674 0.0013 286.3752);
    --muted: oklch(0.9343 0.0013 286.3741);
    --muted-foreground: oklch(0.4447 0.0133 54.2485);
    --accent: oklch(0.9343 0.0013 286.3741);
    --accent-foreground: oklch(0.2336 0.0180 62.9528);
    --destructive: oklch(0.5693 0.1389 22.5154);
    --destructive-foreground: oklch(0.9674 0.0013 286.3752);
    --border: oklch(0.8945 0 0);
    --codeblock: oklch(0.928 0.006 264.531);
    --input: oklch(0.9343 0.0013 286.3741);
    --ring: oklch(0.5850 0.1080 256.6706);
    --chart-1: oklch(0.5850 0.1080 256.6706);
    --chart-2: oklch(0.4939 0.0737 255.8874);
    --chart-3: oklch(0.6639 0.1012 257.3118);
    --chart-4: oklch(0.7388 0.0799 252.3604);
    --chart-5: oklch(0.8127 0.0598 243.1489);
    --sidebar: oklch(1.0000 0 0);
    --sidebar-foreground: oklch(0.2336 0.0180 62.9528);
    --sidebar-primary: oklch(0.5850 0.1080 256.6706);
    --sidebar-primary-foreground: oklch(0.9674 0.0013 286.3752);
    --sidebar-accent: oklch(0.5850 0.1080 256.6706);
    --sidebar-accent-foreground: oklch(0.9674 0.0013 286.3752);
    --sidebar-border: oklch(0.8945 0 0);
    --sidebar-ring: oklch(0.5850 0.1080 256.6706);
    --font-sans: Montserrat;
    --font-serif: serif;
    --font-mono: monospace;
    --radius: 0.60rem;
    --shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
    --shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
    --shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
    --shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.25);
    --tracking-normal: 0rem;
    --spacing: 0.25rem;

    /*  Github section  */
    --font-github-sans: "Mona Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    --github-background: oklch(0.978 0.003 247.858);
    --github-border: oklch(0.887 0.012 239.924);
    --github-text: oklch(0.254 0.011 254.038);
    --github-muted: oklch(0.663 0.014 251.619);
    --github-accent: oklch(48.8% 0.243 264.376);
    --github-hover: oklch(0.93 0.01 264);
}

.dark {
    --background: oklch(0.2781 0.0296 256.8480);
    --foreground: oklch(0.9674 0.0013 286.3752);
    --card: oklch(0.2077 0.0398 265.7549);
    --card-foreground: oklch(0.9674 0.0013 286.3752);
    --popover: oklch(0.2077 0.0398 265.7549);
    --popover-foreground: oklch(0.9674 0.0013 286.3752);
    --primary: oklch(0.5850 0.1080 256.6706);
    --primary-foreground: oklch(0.9674 0.0013 286.3752);
    --secondary: oklch(0.4939 0.0737 255.8874);
    --secondary-foreground: oklch(0.9674 0.0013 286.3752);
    --muted: oklch(0.4939 0.0737 255.8874);
    --muted-foreground: oklch(0.8144 0.0014 286.3692);
    --accent: oklch(0.4939 0.0737 255.8874);
    --accent-foreground: oklch(0.9674 0.0013 286.3752);
    --destructive: oklch(0.4782 0.0955 21.2765);
    --destructive-foreground: oklch(0.9674 0.0013 286.3752);
    --border: oklch(0.4939 0.0737 255.8874);
    --codeblock: oklch(0.278 0.03 256.848);
    --input: oklch(0.4939 0.0737 255.8874);
    --ring: oklch(0.5850 0.1080 256.6706);
    --chart-1: oklch(0.5850 0.1080 256.6706);
    --chart-2: oklch(0.4939 0.0737 255.8874);
    --chart-3: oklch(0.6639 0.1012 257.3118);
    --chart-4: oklch(0.7388 0.0799 252.3604);
    --chart-5: oklch(0.8127 0.0598 243.1489);
    --sidebar: oklch(0.2077 0.0398 265.7549);
    --sidebar-foreground: oklch(0.9674 0.0013 286.3752);
    --sidebar-primary: oklch(0.5850 0.1080 256.6706);
    --sidebar-primary-foreground: oklch(0.9674 0.0013 286.3752);
    --sidebar-accent: oklch(0.5850 0.1080 256.6706);
    --sidebar-accent-foreground: oklch(0.9674 0.0013 286.3752);
    --sidebar-border: oklch(0.4939 0.0737 255.8874);
    --sidebar-ring: oklch(0.5850 0.1080 256.6706);
    --font-sans: Montserrat;
    --font-serif: serif;
    --font-mono: monospace;
    --radius: 0.60rem;
    --shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
    --shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
    --shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
    --shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.25);

    /*  Github section  */
    --github-background: oklch(0.274 0.018 251.918);
    --github-border: oklch(0.376 0.018 254.748);
    --github-text: oklch(0.877 0.014 258.348);
    --github-muted: oklch(0.528 0.015 251.671);
    --github-accent: oklch(70.7% 0.165 254.624);
    --github-hover: oklch(0.18 0.02 264);
}

@theme inline {
    /* Custom Breakpoints */
    --breakpoint-xs: 30rem;
    --breakpoint-2xs: 17rem;

    /* Custom Font Sizes */
    --text-tiny: 0.625rem;

    /* Custom Colors */
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-codeblock: var(--codeblock);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);
    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);

    --font-sans: var(--font-sans);
    --font-mono: var(--font-mono);
    --font-serif: var(--font-serif);

    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);

    --shadow-2xs: var(--shadow-2xs);
    --shadow-xs: var(--shadow-xs);
    --shadow-sm: var(--shadow-sm);
    --shadow: var(--shadow);
    --shadow-md: var(--shadow-md);
    --shadow-lg: var(--shadow-lg);
    --shadow-xl: var(--shadow-xl);
    --shadow-2xl: var(--shadow-2xl);

    --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
    --tracking-tight: calc(var(--tracking-normal) - 0.025em);
    --tracking-normal: var(--tracking-normal);
    --tracking-wide: calc(var(--tracking-normal) + 0.025em);
    --tracking-wider: calc(var(--tracking-normal) + 0.05em);
    --tracking-widest: calc(var(--tracking-normal) + 0.1em);

    /* Github section */
    --font-github-sans: var(--font-github-sans);

    --color-github-background: var(--github-background);
    --color-github-border: var(--github-border);
    --color-github-text: var(--github-text);
    --color-github-muted: var(--github-muted);
    --color-github-accent: var(--github-accent);
    --color-github-hover: var(--github-hover);
}

@layer base {
    * {
        box-sizing: border-box;
    }

    html {
        font-feature-settings: 'kern' 1;
        text-rendering: optimizeSpeed;
        scroll-behavior: smooth;
    }

    body {
        @apply bg-background text-foreground tracking-normal transition-colors duration-100;
    }

    b {
        @apply font-bold;
    }

    nav li {
        @apply list-none;
    }

    .section-padding {
        @apply py-10 md:py-20;
    }

    .container {
        @apply !max-w-screen-xl mx-auto px-5;
        contain: layout style;
    }

    .reverse-section {
        @apply bg-gradient-to-br from-primary to-secondary text-background;
    }

    .primary-button {
        @apply px-4 py-1.5 tracking-wide text-sm text-white rounded-xl bg-secondary transition-all border-2 !border-[#3c587d] shadow-[inset_0_-2px_2px_#3c587d,inset_0_4px_5px_-3px_#6a8ebe];
    }

    .section-title {
        @apply text-primary text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-wide;
    }
}

@layer page-loader {
    .wheel-and-hamster {
        @apply relative scale-75;
        width: 12em;
        height: 12em;
        font-size: 14px;
        --dur: 1s;
    }

    .wheel,
    .hamster,
    .hamster div,
    .spoke {
        @apply absolute;
    }

    .wheel,
    .spoke {
        @apply rounded-full top-0 left-0 w-full h-full;
    }

    .wheel {
        background: transparent;
        border: 5px solid hsl(0, 0%, 60%);
        z-index: 2;
    }

    .hamster {
        @apply top-1/2;
        animation: hamster var(--dur) ease-in-out infinite;
        left: calc(50% - 3.5em);
        width: 7em;
        height: 3.75em;
        transform: rotate(4deg) translate(-0.8em,1.85em);
        transform-origin: 50% 0;
        z-index: 1;
    }

    .hamster__head {
        @apply top-0;
        animation: hamsterHead var(--dur) ease-in-out infinite;
        background: hsl(30,90%,55%);
        border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
        box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset,
        0.75em -1.55em 0 hsl(30,90%,90%) inset;
        left: -2em;
        width: 2.75em;
        height: 2.5em;
        transform-origin: 100% 50%;
    }

    .hamster__ear {
        @apply rounded-full;
        animation: hamsterEar var(--dur) ease-in-out infinite;
        background: hsl(0,90%,85%);
        box-shadow: -0.25em 0 hsl(30,90%,55%) inset;
        top: -0.25em;
        right: -0.25em;
        width: 0.75em;
        height: 0.75em;
        transform-origin: 50% 75%;
    }

    .hamster__eye {
        @apply rounded-full;
        animation: hamsterEye var(--dur) linear infinite;
        background-color: hsl(0,0%,0%);
        top: 0.375em;
        left: 1.25em;
        width: 0.5em;
        height: 0.5em;
    }

    .hamster__nose {
        @apply top-0;
        background: hsl(0,90%,75%);
        border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
        top: 0.75em;
        left: 0;
        width: 0.2em;
        height: 0.25em;
    }

    .hamster__body {
        animation: hamsterBody var(--dur) ease-in-out infinite;
        background: hsl(30,90%,90%);
        border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
        box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset,
        0.15em -0.5em 0 hsl(30,90%,80%) inset;
        top: 0.25em;
        left: 2em;
        width: 4.5em;
        height: 3em;
        transform-origin: 17% 50%;
        transform-style: preserve-3d;
    }

    .hamster__limb--fr,
    .hamster__limb--fl {
        clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);
        top: 2em;
        left: 0.5em;
        width: 1em;
        height: 1.5em;
        transform-origin: 50% 0;
    }

    .hamster__limb--fr {
        animation: hamsterFRLimb var(--dur) linear infinite;
        background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);
        transform: rotate(15deg) translateZ(-1px);
    }

    .hamster__limb--fl {
        animation: hamsterFLLimb var(--dur) linear infinite;
        background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%);
        transform: rotate(15deg);
    }

    .hamster__limb--br,
    .hamster__limb--bl {
        clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);
        top: 1em;
        left: 2.8em;
        width: 1.5em;
        height: 2.5em;
        transform-origin: 50% 30%;
        border-radius: 0.75em 0.75em 0 0;
    }

    .hamster__limb--br {
        animation: hamsterBRLimb var(--dur) linear infinite;
        background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%);
        transform: rotate(-25deg) translateZ(-1px);
    }

    .hamster__limb--bl {
        animation: hamsterBLLimb var(--dur) linear infinite;
        background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%);
        transform: rotate(-25deg);
    }

    .hamster__tail {
        animation: hamsterTail var(--dur) linear infinite;
        background: hsl(0,90%,85%);
        box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset;
        top: 1.5em;
        right: -0.5em;
        width: 1em;
        height: 0.5em;
        border-radius: 0.25em 50% 50% 0.25em;
        transform: rotate(30deg) translateZ(-1px);
        transform-origin: 0.25em 0.25em;
    }

    .spoke {
        animation: spoke var(--dur) linear infinite;
        background:
            radial-gradient(
                circle at center,
                hsl(0, 0%, 60%) 4.8%,
                hsla(0, 0%, 60%, 0) 5%
            ),
            linear-gradient(
                180deg,
                hsla(0, 0%, 55%, 0) 46.9%,
                hsl(0, 0%, 65%) 47%,
                hsl(0, 0%, 65%) 52.9%,
                hsla(0, 0%, 65%, 0) 53%
            )
            50% 50% / 99% 99% no-repeat;
    }

    @keyframes hamster {
        from, to {
            transform: rotate(4deg) translate(-0.8em,1.85em);
        }
        50% {
            transform: rotate(0) translate(-0.8em,1.85em);
        }
    }

    @keyframes hamsterHead {
        from, 25%, 50%, 75%, to {
            transform: rotate(0);
        }
        12.5%, 37.5%, 62.5%, 87.5% {
            transform: rotate(8deg);
        }
    }

    @keyframes hamsterEye {
        from, 90%, to {
            transform: scaleY(1);
        }
        95% {
            transform: scaleY(0);
        }
    }

    @keyframes hamsterEar {
        from, 25%, 50%, 75%, to {
            transform: rotate(0);
        }
        12.5%, 37.5%, 62.5%, 87.5% {
            transform: rotate(12deg);
        }
    }

    @keyframes hamsterBody {
        from, 25%, 50%, 75%, to {
            transform: rotate(0);
        }
        12.5%, 37.5%, 62.5%, 87.5% {
            transform: rotate(-2deg);
        }
    }

    @keyframes hamsterFRLimb {
        from, 25%, 50%, 75%, to {
            transform: rotate(50deg) translateZ(-1px);
        }
        12.5%, 37.5%, 62.5%, 87.5% {
            transform: rotate(-30deg) translateZ(-1px);
        }
    }

    @keyframes hamsterFLLimb {
        from, 25%, 50%, 75%, to {
            transform: rotate(-30deg);
        }
        12.5%, 37.5%, 62.5%, 87.5% {
            transform: rotate(50deg);
        }
    }

    @keyframes hamsterBRLimb {
        from, 25%, 50%, 75%, to {
            transform: rotate(-60deg) translateZ(-1px);
        }
        12.5%, 37.5%, 62.5%, 87.5% {
            transform: rotate(20deg) translateZ(-1px);
        }
    }

    @keyframes hamsterBLLimb {
        from, 25%, 50%, 75%, to {
            transform: rotate(20deg);
        }
        12.5%, 37.5%, 62.5%, 87.5% {
            transform: rotate(-60deg);
        }
    }

    @keyframes hamsterTail {
        from, 25%, 50%, 75%, to {
            transform: rotate(30deg) translateZ(-1px);
        }
        12.5%, 37.5%, 62.5%, 87.5% {
            transform: rotate(10deg) translateZ(-1px);
        }
    }

    @keyframes spoke {
        from {
            transform: rotate(0);
        }
        to {
            transform: rotate(-1turn);
        }
    }
}

@layer theme-switcher {

    .theme-switch {
        --toggle-size: 17px;
        --container-width: 5.15em;
        --container-height: 2.5em;
        --container-radius: 6.25em;
        --container-light-bg: #3D7EAE;
        --container-night-bg: #1D1F2C;
        --circle-container-diameter: 3.375em;
        --sun-moon-diameter: 2.125em;
        --sun-bg: #ECCA2F;
        --moon-bg: #C4C9D1;
        --spot-color: #959DB1;
        --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
        --stars-color: #fff;
        --clouds-color: #F3FDFF;
        --back-clouds-color: #AACADF;
        --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
        --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
    }

    .theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-size: var(--toggle-size);
    }

    .theme-switch__container {
        width: var(--container-width);
        height: var(--container-height);
        background-color: var(--container-light-bg);
        border-radius: var(--container-radius);
        overflow: hidden;
        cursor: pointer;
        -webkit-box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
        box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
        -webkit-transition: var(--transition);
        -o-transition: var(--transition);
        transition: var(--transition);
        position: relative;
    }

    .theme-switch__container::before {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0;
        -webkit-box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
        box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
        border-radius: var(--container-radius)
    }

    .theme-switch__checkbox {
        display: none;
    }

    .theme-switch__circle-container {
        width: var(--circle-container-diameter);
        height: var(--circle-container-diameter);
        background-color: rgba(255, 255, 255, 0.1);
        position: absolute;
        left: var(--circle-container-offset);
        top: var(--circle-container-offset);
        border-radius: var(--container-radius);
        -webkit-box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-transition: var(--circle-transition);
        -o-transition: var(--circle-transition);
        transition: var(--circle-transition);
        pointer-events: none;
    }

    .theme-switch__sun-moon-container {
        pointer-events: auto;
        position: relative;
        z-index: 2;
        width: var(--sun-moon-diameter);
        height: var(--sun-moon-diameter);
        margin: auto;
        border-radius: var(--container-radius);
        background-color: var(--sun-bg);
        -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
        box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
        -webkit-filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
        filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
        overflow: hidden;
        -webkit-transition: var(--transition);
        -o-transition: var(--transition);
        transition: var(--transition);
    }

    .theme-switch__moon {
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
        width: 100%;
        height: 100%;
        background-color: var(--moon-bg);
        border-radius: inherit;
        -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
        box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
        -webkit-transition: var(--transition);
        -o-transition: var(--transition);
        transition: var(--transition);
        position: relative;
    }

    .theme-switch__spot {
        position: absolute;
        top: 0.75em;
        left: 0.312em;
        width: 0.75em;
        height: 0.75em;
        border-radius: var(--container-radius);
        background-color: var(--spot-color);
        -webkit-box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
        box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
    }

    .theme-switch__spot:nth-of-type(2) {
        width: 0.375em;
        height: 0.375em;
        top: 0.937em;
        left: 1.375em;
    }

    .theme-switch__spot:nth-last-of-type(3) {
        width: 0.25em;
        height: 0.25em;
        top: 0.312em;
        left: 0.812em;
    }

    .theme-switch__clouds {
        width: 1.25em;
        height: 1.25em;
        background-color: var(--clouds-color);
        border-radius: var(--container-radius);
        position: absolute;
        bottom: -0.625em;
        left: 0.312em;
        -webkit-box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
        box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
        -webkit-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
        -o-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
        transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
    }

    .theme-switch__stars-container {
        position: absolute;
        color: var(--stars-color);
        top: -100%;
        left: 0.312em;
        width: 2.75em;
        height: auto;
        -webkit-transition: var(--transition);
        -o-transition: var(--transition);
        transition: var(--transition);
    }

    /* actions */
    .theme-switch__checkbox:checked + .theme-switch__container {
        background-color: var(--container-night-bg);
    }

    .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
        left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
    }

    .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
        left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em)
    }

    .theme-switch__circle-container:hover {
        left: calc(var(--circle-container-offset) + 0.187em);
    }

    .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
        -webkit-transform: translate(0);
        -ms-transform: translate(0);
        transform: translate(0);
    }

    .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
        bottom: -4.062em;
    }

    .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}

@layer navbar {
    .mobile-menu-item {
        @apply relative flex items-center justify-start gap-3 p-2 text-foreground;
    }
    .mobile-menu-item a {
        @apply w-full py-1 text-sm;
    }
    .mobile-menu-icon-wrapper {
        @apply p-2 bg-gray-500/5 rounded-lg;
    }
    .mobile-menu-icon {
        @apply w-4 h-4 text-foreground/70;
    }
    .mobile-menu-item > button:after {
        @apply absolute content-[''] w-full h-full bg-transparent inset-0 rounded-lg;
    }

    .active {
        @apply bg-primary/10 rounded-xl text-primary;
    }
    .active span {
        @apply bg-primary/10;
    }
    .active span svg {
        @apply text-primary;
    }
    .mobile-menu-item.active {
        animation: activeSlideIn 0.3s ease-out;
    }
    @keyframes activeSlideIn {
        from {
            transform: translateX(-5px);
            opacity: 0.8;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
}

@layer code-block {
    .code-block {
        @apply relative max-w-lg min-w-0 h-full w-full border-4 border-gray-500/20 rounded-2xl;
    }

    .code-block:after {
        @apply absolute content-[''] w-36 h-10 top-0 right-0 bg-gradient-to-l from-codeblock via-codeblock to-transparent rounded-e-xl;
    }

    .code-block * {
        @apply [&::-webkit-scrollbar]:w-2
        [&::-webkit-scrollbar]:h-2
        [&::-webkit-scrollbar-thumb]:rounded-[2px]
        [&::-webkit-scrollbar-track]:bg-transparent
        [&::-webkit-scrollbar-thumb]:bg-muted-foreground/10;
    }

    .codeblock-buttons {
        @apply absolute content-[''] w-20 h-10 top-0 right-0 z-10;
    }

    .code-block > div {
        @apply h-[350px] flex flex-col gap-3 p-0 rounded-xl bg-background transition-all duration-200;
    }

    .code-block > div > div:nth-child(1) {
        @apply relative bg-codeblock border-b-2 border-gray-500/20 p-2 pb-0 pr-24 rounded-t-xl;
    }

    .code-block > div > div:nth-child(2) {
        @apply m-2;
    }

    .code-block code {
        @apply h-full;
    }

    .code-block button {
        @apply hover:text-foreground/80 rounded-t-md;
    }

    .code-block button.text-white {
        @apply text-foreground bg-gray-500/10 border-b-2 border-b-primary;
    }

    .code-block pre {
        scrollbar-width: thin;
        scrollbar-color: rgb(209 213 219) transparent;
    }

    .dark .code-block pre {
        scrollbar-color: rgb(75 85 99) transparent;
    }

    .code-block pre::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    .code-block pre::-webkit-scrollbar-track {
        @apply bg-transparent;
    }
    .code-block pre::-webkit-scrollbar-thumb {
        @apply bg-gray-300 dark:bg-gray-600 rounded-full;
    }
    .code-block pre::-webkit-scrollbar-thumb:hover {
        @apply bg-gray-400 dark:bg-gray-500;
    }

    .code-block .linenumber {
        @apply select-none opacity-50;
    }

    .code-block .token.comment,
    .code-block .token.prolog,
    .code-block .token.doctype,
    .code-block .token.cdata {
        @apply italic;
    }

    .code-block .token.keyword {
        @apply font-semibold;
    }

    .char-animate {
        display: inline-block;
        animation: scale-bounce 10s ease forwards;
        transform: scale(0);
        opacity: 0;
    }

    .char-delete {
        display: inline-block;
        animation: char-delete 2s ease-out forwards;
        opacity: 100;
    }

    @keyframes scale-bounce {
        0% {
            transform: scale(0);
            opacity: 0;
        }
        60% {
            transform: scale(1.08);
            opacity: 0.95;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes char-appear {
        0% {
            opacity: 0;
            transform: translateY(8px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes char-delete {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        100% {
            opacity: 0;
            transform: scale(0.95);
        }
    }
}

@layer about {
    .about-wrapper {
        @apply flex flex-col items-start justify-center gap-1;
    }
}

@layer tech-stack {
    .skill {
        @apply flex flex-col items-start justify-center gap-3 bg-white dark:bg-gray-800 border border-muted-foreground/20 rounded-xl mb-4 shadow-xs;
    }

    .skill > div {
        @apply px-4;
    }
}

@layer certificates {
    .certificates-card {
        @apply m-auto h-full w-full max-w-80 flex flex-col justify-between gap-3 bg-gradient-to-bl from-secondary to-sidebar-accent p-4 rounded-3xl border-2 border-[#3c587d] shadow-[inset_0_-2px_2px_#3c587d,inset_0_4px_5px_-3px_#6a8ebe];
    }

    .certificates-tag {
        @apply text-tiny font-semibold cursor-default max-h-[19px] rounded-sm;
    }
}

@layer my-github {
    .github-section {
        @apply bg-github-background text-github-text border-t-2 border-b-2 border-github-border;
    }

    .github-repos {
        @apply flex flex-col gap-2 items-start justify-start ml-5 pt-3 overflow-hidden;
    }

    .github-repo {
        @apply relative w-full max-w-6/7 md:max-w-4/6 flex flex-col gap-2 border-2 border-github-border p-3 ms-[18px] rounded-2xl;
    }

    .github-repo::before {
        @apply content-[''] absolute -left-5 -top-24 w-5 h-36 rounded-bl-2xl border-b-2 border-l-2 border-github-border;
    }
}

@layer stay-in-touch {
    .stay-in-touch-item-wrapper {
        @apply flex flex-col gap-8 mt-7;
    }

    .stay-in-touch-item-wrapper li {
        @apply w-fit flex flex-col text-secondary dark:text-primary;
    }

    .stay-in-touch-item-wrapper li b {
        @apply relative text-xl ms-4 uppercase;
    }

    .stay-in-touch-item-wrapper li b:before {
        @apply content-[''] absolute top-0 bottom-0 w-2 h-10/12 my-auto -ms-4 rounded-full bg-secondary/30;
    }

    .stay-in-touch-item-wrapper li a {
        @apply inline-block text-secondary dark:text-chart-3 hover:underline underline-offset-4;
    }
}