:root {
    --color-primary-500: 4 16 107;
    --color-primary-exclusion: 238 255 130;

    --color-gray-50: 20 20 20;
    --color-gray-100: 33 34 36;
    --color-gray-200: 34 36 38;
    --color-gray-300: 35 37 39;
    --color-gray-500: 198 198 198;
    --color-gray-600: 255 255 255;
    --color-gray-700: 205 204 203;

    --color-dark-400: 231 231 231;
    --color-dark-500: 242 240 238;
    --color-dark-l: 221 219 217;

    --color-white: 20 20 20;
    --color-black: 255 255 255;

    --color-indigo-900: 201 228 127;
    --color-primary-default: 4 16 107;

    --container-width: 1070px;


    --meet-your-needs-float: 0;
    --our-need-wrapper-height: 0;
    --header-height: 0;
    --max-z-index: 2147483647;
    --preload-progress: 0;
}

.dark {
    --color-primary-500: 237 255 130;
    --color-primary-exclusion: 237 255 130;

    --color-gray-50: 242 240 238;
    --color-gray-100: 223 222 220;
    --color-gray-200: 221 219 217;
    --color-gray-300: 220 218 216;
    --color-gray-500: 57 57 57;
    --color-gray-600: 40 40 40;
    --color-gray-700: 40 40 40;

    --color-dark-400: 24 24 24;
    --color-dark-500: 20 20 20;
    --color-dark-l: 29.1 29.1 29.1;

    --color-white: 255 255 255;
    --color-black: 0 0 0;

    --color-indigo-900: 54 27 128;
    --color-primary-default: 4 16 107;
}

/* Remove default scrollbar */
html, body, #scroll-snap-element {
    scrollbar-width: none; /* Firefox 64 */

    ::selection {
        background: rgb(var(--color-primary-500));
        color: rgb(var(--color-primary-exclusion));
    }

    &.dark {
        ::selection {
            background: rgb(var(--color-primary-exclusion));
            color: rgb(var(--color-primary-default));
        }
    }
}

@media not (hover: none) {
    html:not(.no-js) body * {
        cursor: none !important;
    }
}

@media (hover: none) {
    .mf-cursor {
        display: none;
    }
}

html, body, #scroll-snap-element {
    ::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
        -ms-overflow-style: none; /* IE 11 */
    }
}

main {
    width: 100%;
}

input {
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}