/* TYPOGRAPHY */
:root {
    --font-sen: 'Sen', sans-serif;
    --font-albert: 'Albert Sans', sans-serif;
    --font-figtree: 'Figtree', sans-serif;
    --font-prompt: 'Prompt', sans-serif;
    --font-red-hat: 'Red Hat Display', sans-serif;

    --main-font: var(--font-red-hat);

    
    --title-size: 1.05rem;
    --btn-size: .9rem;
    --text-size: .76rem;
    --capt-size: .55rem;
    --tag-size: .55rem;

    --font-spacing: .05rem;
    --font-spacing-big: .1rem;
    --font-spacing-huge: .25rem;
    --font-spacing-title: .5rem;

    /* --main-font-weight: var(--light);
    --light-font-weight: var(--extralight);
    --medium-font-weight: var(--regular);
    --bold-font-weight: var(--medium);
    --extrabold-font-weight: var(--bold); */

    /* Red Hat Font */
    --main-font-weight: var(--regular);
    --light-font-weight: var(--light);
    --medium-font-weight: var(--medium);
    --bold-font-weight: var(--bold);
    --extrabold-font-weight: var(--bold);
    /*/ Red Hat Font */

    --thin: 100;
    --extralight: 200;
    --light: 300;
    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;
    --extrabold: 800;
    --black: 900;
}
/*/ TYPOGRAPHY */

/* COLORS */
:root {
    --main-color-dark: var(--darker-blue);
    --main-color: var(--dark-blue);
    --main-color-mid-light: var(--blue);
    --main-color-light: var(--light-blue);
    --main-color-lighter: var(--lighter-blue);
    --main-color-lightest: var(--lightest-blue);
    --main-color-bg: var(--main-color-lighter);
    --accent-color: #F37027;

    --darker-blue: #01164E;     /* dark */
    --dark-blue: #62A7E6;       /* 100% main */
    --blue: #81B8EB;            /* 80% mid-light */
    --light-blue: #B0D3F2;      /* 50% light */
    --lighter-blue: #CFE4F8;    /* 30% lighter */
    --lightest-blue: #EFF6FD;   /* 10% lightest */
    --trans-80-blue: rgba(129, 184, 235, .8);
    --trans-60-blue: rgba(129, 184, 235, .6);
    --trans-40-blue: rgba(129, 184, 235, .4);
    --trans-20-blue: rgba(129, 184, 235, .2);

    --darker-red: #FF758C;
    --dark-red: #FF90A3;
    --red: #FFB9C5;
    --light-red: #FFD5DC;
    --lighter-red: #FFF1F3;

    --darker-purple: #7D63ED;
    --dark-purple: #9782F0;
    --purple: #BDB0F6;
    --light-purple: #D8D0FA;
    --lighter-purple: #F2EFFD;

    --darkest-yellow: #FCB441;
    --darker-yellow:#FDC66E;
    --dark-yellow: #FDD18B;
    --yellow: #FEE2B6;
    --light-yellow: #FFEED3;
    --lighter-yellow: #FFF9F0; 

    --darker-green: #69BABA;
    --dark-green: #87C7C7;
    --green: #B3DCDC;
    --light-green: #D1EAEA;
    --lighter-green: #F0F8F8;


    --darker-grey: #1F2026;
    --dark-grey: #4B4C51;
    --grey: #8E8F92;
    --light-grey: #BBBBBD;
    --lighter-grey: #E8E8E9;
    --almost-white: #FCFCFD;

    --shadow-color: #8F919830; /* light-grey at .30 opacity */
    --shadow-color-intense: #8F9198A9; /* light-grey at .60 opacity */

    --gradient: linear-gradient(117deg, var(--darker-blue) 0%, var(--dark-blue) 90%);
    --gradient-col1: rgba(1, 22, 78, .7);
    --gradient-col2: rgba(98, 167, 230, .7);
}
/*/ COLORS */

/* OPACITY */
:root {
    --main-opacity: var(--opac-25);

    --opac-10: .1;
    --opac-25: .25;
    --opac-40: .4;
    --opac-50: .5;
    --opac-60: .6;
    --opac-95: .95;

}
/*/ OPACITY */

/* BOX */
:root {
    --bdr-thick: 1px;
    --bdr-thicker: calc(var(--bdr-thick) * 2);

    --out-thick: 1px;
    --out-thicker: calc(var(--out-thick) * 2);
    /* --out-in-thick: calc(var(--out-thick) * -1);
    --out-in-thicker: calc(var(--out-thicer) * -1); */

    --shadow: 0px 0px 5px var(--shadow-color);
    --shadow-values: 0px -1px 0px;
    --shadow-text: 0px 0px 5px var(--light-grey);
    --shadow-inset: 0px 0px 5px var(--shadow-color) inset;
    --shadow-inset-intense: 1px 1px 8px var(--shadow-color-intense) inset;

    --bdr-rad-sm: 4px;
    --bdr-rad: 6px;
}
/*/ BOX */

/* MARGINS */
:root {
    --margin-xxs: .125rem;
    --margin-xs: .375rem;
    --margin-sm: .75rem;
    --margin: 1rem;
    --margin-lg: 1.5rem;
    --margin-xl: 2rem;
}
/*/ MARGINS */

/* ANIMATIONS */
:root {
    --animation-curve: cubic-bezier(1, 0, 0, 1);
    /* cubic-bezier(0.68, -0.6, 0.32, 1.6); */
}
/*/ ANIMATIONS */

/* CHECK */
:root {
    --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%2362a7E6' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");
}
/*/ CHECK */

/* BORDER */
:root {
    --border: var(--bdr-thick) solid var(--main-color-lighter);
    --border-mid: var(--bdr-thick) solid var(--main-color-mid-light);
    --border-dark: var(--bdr-thick) solid var(--main-color-light); /* light blue */
    --border-focus: var(--bdr-thick) solid var(--main-color);
}
/*/ BORDER */