:root {
    --font-family: 'Inter Tight Variable', sans-serif;
    /* colour palettes */
    --nav-height-small: 80px;
    --nav-height: 80px;
    --nav-height-large: 100px;
    /*  */
    --white-0: #ffffff;
    --white-1: #f8f9faff;
    --white-2: #e9ecefff;
    --grey: #dee2e6ff;
    --grey-2: #ced4daff;
    --grey-3: #adb5bdff;
    --grey-4: #6c757dff;
    --grey-5: #495057ff;
    --grey-6: #343a40ff;
    --black: #212529ff;    
    /*  */
    /* 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;
    /*  */
}

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

.jc-c {justify-content: center;}
.jc-s {justify-content: flex-start;}
.jc-e {justify-content: flex-end;}
.jc-sb {justify-content: space-between;}
.jc-sa {justify-content: space-around;}

.ai-c {align-items: center;}
.ai-s {align-items: flex-start;}
.ai-e {align-items: flex-end;}
.ai-sb {align-items: space-between;}
.ai-sa {align-items: space-around;}

.fw-w {flex-wrap: wrap;}
.fw-nw {flex-wrap: nowrap;}

.fd-r {flex-direction: row;}
.fd-c {flex-direction: column;}
.fd-cr {flex-direction: column-reverse;}
.fd-rr {flex-direction: row-reverse;}

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

.fill-h {
    height: 100%;
}

.fill-w {
    width: 100%;
}