app.css

@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap");
/* @tailwind base; */
/* @tailwind components; */
@tailwind utilities;
:root {
    font-family: "Ubuntu", sans-serif;
    /* text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%; */

    --bg-grey-1: #333333;
    --warm-grey: #aea79f;
    --bg-dark-1: #111111;
    --bg-dark-2: #1f1f1f;
    --dark-4: #292929;
    --white: #fff;
    --grey-1: #6b6b6b;
    --grey-2: #7b7b7b6d;
    --main-orange: #e95420;
    /* --bg-light-white: #ffffff00; */
    --bg-light-white: #ffffff2a;
    --bg-darker-white: #ffffff1d;
    --bg-soft-white: #ffffff43;
    --bg-dark-trans: #1c1017ca;
    --bg-window-bar: #222222;
    --light-purple: #77216f;
    --mid-purple: #5e2750;
    --dark-purple: #300a24;
    --bg-dark-3: #272727;
    --bg-dark-hover: #ffffff0d;
    --bg-dark-app: #2c2c2c;
    --red-1: #a11223;
    --green-1: #0e761d;

    --bark: #787859;
    --sage: #657b69;
    --olive: #4b8501;
    --viridian: #03875b;
    --prussian-green: #308280;
    --blue: #0073e5;
    --purple: #7764d8;
    --magenta: #b34cb3;
    --red-theme: #da3450;
}
* {
    letter-spacing: 0.5px;
    cursor: url("/cursor/arrow_24x24.cur"), auto;
    font-family: "Ubuntu", sans-serif;
}

button {
    background-color: transparent;
    border: none;
    padding: 0;
}
body {
    font-family: "Ubuntu", sans-serif;
    margin: 0;
    display: flex;
    overflow: hidden;
}

h2 {
    margin: 0;
}

@layer utilities {
    .img-icon {
        filter: brightness(0) invert(1) !important;
    }

    .scrollbar-thin::-webkit-scrollbar {
        width: 6px;
        background-color: transparent;
        /* position: absolute;
        z-index: 5;
        right: 0; */
    }

    .scrollbar-thin::-webkit-scrollbar-track {
        background-color: transparent;
    }

    .scrollbar-thin::-webkit-scrollbar-thumb {
        width: 100%;
        background-color: var(--grey-1);
        border-radius: 100vh;
    }

    .scrollbar-thin::-webkit-scrollbar-thumb:hover {
        background-color: var(--grey-1);
    }
}

@media screen and (max-height: 762px) {
    :root {
        font-size: 12px;
    }
}

@media screen and (max-height: 782px) {
    :root {
        font-size: 14px;
    }
}