@tailwind base;
@tailwind components;
@tailwind utilities;


/* --- MAIN AND ROOT -------------------------------------------------------------------------------------- */


body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Helvetica", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#root {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
    margin-top: 64px;
}

main {
    flex: 1;
}


/* --- SCROLLBAR ------------------------------------------------------------------------------------------ */


::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: #252525;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #6a6969;
}

::-webkit-scrollbar-track {
    background-color: #3d3d3d;
}


/* --- nProgress ------------------------------------------------------------------------------------------ */


#nprogress {
    pointer-events: none;
}

#nprogress .bar {
    background: #2b7a7f;
    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
}

#nprogress .peg {
    display: block;
    position: absolute;
    right: 0;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px hsl(var(--primary)),
    0 0 5px hsl(var(--primary));
    opacity: 1;
    -webkit-transform: rotate(3deg) translate(0px, -4px);
    -ms-transform: rotate(3deg) translate(0px, -4px);
    transform: rotate(3deg) translate(0px, -4px);
}

.nprogress-custom-parent {
    overflow: hidden;
    position: relative;
}

.nprogress-custom-parent #nprogress .bar {
    position: absolute;
}


/* --- TAILWIND ------------------------------------------------------------------------------------------- */


@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 0 0% 3.9%;
        --card: 0 0% 100%;
        --card-foreground: 0 0% 3.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 0 0% 3.9%;
        --primary: 0 0% 9%;
        --primary-foreground: 0 0% 98%;
        --secondary: 0 0% 96.1%;
        --secondary-foreground: 0 0% 9%;
        --muted: 0 0% 96.1%;
        --muted-foreground: 0 0% 45.1%;
        --accent: 0 0% 96.1%;
        --accent-foreground: 0 0% 9%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 89.8%;
        --input: 0 0% 89.8%;
        --ring: 0 0% 3.9%;
        --radius: 0.5rem;

        --color-1: 0 100% 63%;
        --color-2: 270 100% 63%;
        --color-3: 210 100% 63%;
        --color-4: 195 100% 63%;
        --color-5: 90 100% 63%;
    }

    .dark {
        --background: 0 0% 6%;
        --foreground: 0 0% 98%;
        --card: 206 18% 10%;
        --card-foreground: 0 0% 89%;
        --popover: 0 0% 3.9%;
        --popover-foreground: 0 0% 98%;
        --primary: 0 0% 98%;
        --primary-foreground: 0 0% 9%;
        --secondary: 0 0% 14.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 0 0% 14.9%;
        --muted-foreground: 0 0% 63.9%;
        --accent: 0 0% 14.9%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 14.9%;
        --input: 0 0% 14.9%;
        --ring: 0 0% 83.1%;

        --color-1: 0 100% 63%;
        --color-2: 270 100% 63%;
        --color-3: 210 100% 63%;
        --color-4: 195 100% 63%;
        --color-5: 90 100% 63%;
    }
}


@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
    }
}