:root {
    /* 10 neutral colors for ui */
    --neutral-10: #333;
    --neutral-9: #444;
    --neutral-8: #555;
    --neutral-7: #666;
    --neutral-6: #777;
    --neutral-5: #888;
    --neutral-4: #999;
    /*  should be almost white */
    --neutral-3: #aaa;
    --neutral-2: #bbb;
    --neutral-1: #ccc;
    --neutral-0: #ddd;
    /* whites */
    --white-0: #fff;
    --white-1: hsl(0, 0%, 95%);

    /* OLD STYLES */
    /*  */
    --white-0: #ffffff;
    --white-1: #f8f9faff;
    --white-2: #e9ecefff;
    --grey: #dee2e6ff;
    --grey-0: rgb(250, 250, 250);
    --grey-1: #f8f9faff;
    --grey-2: #ced4daff;
    --grey-3: #adb5bdff;
    --grey-4: #6c757dff;
    --grey-5: #495057ff;
    --grey-6: #343a40ff;
    --black: #212529ff;  
    --black-1: #121212;
    --black-2: #181818;
    /*  */
    --purple: #651FFF;
    --purple-2: #7C4DFF;
    --purple-3: #B99AFF;
    --purple-4: #E8DEFF;
    --purple-5: #F5F0FF;
    --blue: #2979FF;
    --blue-opaque: #2978ff24;
    --blue-2: #448AFF;
    --blue-3: #91C2FF;
    --blue-4: #DEEAFF;
    --blue-4-mid: #eaf1ff;
    --blue-5: #F0F5FF;
    --blue-5-opaque: #f0f5fff6;
    --black-blue: rgb(49, 52, 60);

    --orange: #FF6F00;
    --orange-2: #FF8426;
    --orange-3: #FFA159;
    --orange-4: #FFDBBF;
    --orange-5: #FFF5E8;
    --yellow: #FFAB00;
    --yellow-2: #FFB726;
    --yellow-3: #FFD98C;
    --yellow-4: #FFF3D9;
    --yellow-5: #FFFBE8;
    --green: #00BFA5;
    --green-2: #26C8B2;
    --green-3: #59D5C4;
    --green-4: #BFEFE8;
    --green-5: #F2FCFA;
    --red: #FF4436;
    --red-2: #FF6659;
    --red-3: #FFB2AC;
    --red-4: #FFE8E6;
    --red-5: #FFF5F4;
    --pink: #ff147ed7;
    --pink-2: #ec4b93d7;
    --pink-3: #d977b0d7;
    --pink-4: #c6a3cdd7;
    --pink-5: #b3cfe7d7;
    /* easing */
    --ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    /* shadow */
    --shadow-a: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    --shadow-b: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    --shadow-c: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
    --shadow-d: rgba(17, 17, 26, 0.1) 0px 0px 16px;
    /* font sizes  */
    --fs-7: 5.3958em;
    --fs-6: 3.7708em;
    --fs-5: 2.0625em;
    --fs-4: 1.625em;
    --fs-3: 1.1458em;
    --fs-2: 1.06em;
    --fs-1: 0.7917em;
    --fs-0: 0.7083em;

    /* radius sizes */
    --rad-0: 3px;
    --rad-1: 8px;
    --rad-2: 15px;
    --rad-3: 23px;

}

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

html {
    color: var(--neutral-1);
}

.fill {
    height: 100%;
    width: 100%;
}

.abs-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.fixed-fill {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.flex {display: flex}

.flex-centered {
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
}

.ai-c {justify-content: center}
.ai-fs {justify-content: flex-start}
.ai-fe {justify-content: flex-end}

.jc-c {justify-content: center}
.jc-fs {justify-content: flex-start}
.jc-fe {justify-content: flex-end}
.jc-sb {justify-content: space-between}
.jc-sa {justify-content: space-around}