@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
    --background: #fff;
    --foreground: #171717
}

@media (prefers-color-scheme:dark) {
    :root {
        --background: #0a0a0a;
        --foreground: #ededed
    }
}

html {
    overflow-x: hidden
}

body {
    color: var(--foreground);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden
}

#wrapper {
    flex-direction: column;
    min-height: 100vh;
    display: flex
}

#content {
    flex: 1 0 auto;
    width: 100%
}

footer {
    flex-shrink: 0
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

a {
    color: inherit;
    text-decoration: none
}

@media (prefers-color-scheme:dark) {
    html {
        --lightningcss-light: ;
        --lightningcss-dark: initial;
        color-scheme: dark
    }
}

#extra-content {
    width: 100% !important;
    padding-right: 0 !important;
    right: 0 !important;
    overflow-y: auto !important
}

body.no-scroll {
    overflow: hidden !important
}

#extra-content::-webkit-scrollbar {
    width: 6px
}

#extra-content::-webkit-scrollbar-thumb {
    background-color: #fff3;
    border-radius: 3px
}