:root {
    --none: transparent;
    --max-radius: 9999px;
    --border-radius: 20px;
    --button-border-radius: 15px;
    --scrollbar-track: var(--none);
    --scrollbar-thumb: #969696;

    --white: #ffffff;
    --light-grey: #c4c4c4;
    --purple: #bfaff2;
    --light-yellow: #fbe4ab;
    --yellow: #ffdf90;
    --red: #ff6250;
    --blue: #3366ff;
    --light-green: #d9efeb;
    --green: #009379;
    --dark-gray: #333333;
    --primary-gray: #2b2b2b;
}

* {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.visually-hidden {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    border: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    clip-path: inset(100%) !important;
    clip: rect(0 0 0 0) !important;
    overflow: hidden !important;
}

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

@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

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

@keyframes fade-in {
    to {
        opacity: 1;
        pointer-events: auto;
    }
}

/* @keyframes scrolled {
    to {
        opacity: 1;
    }
} */