@font-face{
    font-family:'Montserrat-Light';
    src:url(../fonts/Montserrat-Light.otf);
    font-display: swap;
}
@font-face{
    font-family:'Montserrat-Regular';
    src:url(../fonts/Montserrat-Regular.otf);
    font-display: swap;
}
@font-face{
    font-family:'Montserrat-Medium';
    src:url(../fonts/Montserrat-Medium.otf);
    font-display: swap;
}
@font-face{
    font-family:'Montserrat-Bold';
    src:url(../fonts/Montserrat-Bold.otf);
    font-display: swap;
}

:root {
    --img-jpg-url: '';
    --img-webp-url: '';

    --font-light: 'Montserrat-Light';
    --font-regular: 'Montserrat-Regular';
    --font-medium: 'Montserrat-Medium';
    --font-bold: 'Montserrat-Bold';

    --position-type: relative;
    --invert-value: 0;

    --min-w-v: 100%;
    --max-w-v: 100%;
    --w-v: 100%;
    --h-v: 100%;
    --m-v: 0;
    --m-t-v: var(--m-v);
    --m-r-v: var(--m-v);
    --m-b-v: var(--m-v);
    --m-l-v: var(--m-v);
    --p-v: 0;
    --p-t-v: var(--p-v);
    --p-r-v: var(--p-v);
    --p-b-v: var(--p-v);
    --p-l-v: var(--p-v);

    --header-height: 80px;
    --hex-width: 120px;
    --hex-height: 60px;
    --hex-padding: 10px;
    --hex-border: 1.08;

    --title-size-min: 8px;
    --desc-size-min: 8px;

    --title-size-xs: var(--title-size-min);
    --title-size-sm: calc(var(--title-size-min) + var(--title-size-min) * 0.3);
    --title-size-md: calc(var(--title-size-min) + var(--title-size-min) * 0.65);
    --title-size: calc(var(--title-size-min) + var(--title-size-min) * 1);
    --title-size-lg: calc(var(--title-size-min) + var(--title-size-min) * 1.4);
    --title-size-xl: calc(var(--title-size-min) + var(--title-size-min) * 2.2);
    --title-size-xxl: calc(var(--title-size-min) + var(--title-size-min) * 3.2);
    --title-size-xxxl: calc(var(--title-size-min) + var(--title-size-min) * 4);

    --desc-size-xs: var(--desc-size-min);
    --desc-size-sm: calc(var(--desc-size-min) + var(--desc-size-min) * 0.2);
    --desc-size-md: calc(var(--desc-size-min) + var(--desc-size-min) * 0.4);
    --desc-size: calc(var(--desc-size-min) + var(--desc-size-min) * 0.6);
    --desc-size-lg: calc(var(--desc-size-min) + var(--desc-size-min) * 0.8);
    --desc-size-xl: calc(var(--desc-size-min) + var(--desc-size-min) * 1);
    --desc-size-xxl: calc(var(--desc-size-min) + var(--desc-size-min) * 1.5);
    --desc-size-xxxl: calc(var(--desc-size-min) + var(--desc-size-min) * 2);

    /* Color Variable CSS */
    --rgb-color-1: 217, 222, 227;
    --rgb-color-1-fix: 217, 222, 227;
    --rgb-color-2: 38, 33, 28;
    --rgb-color-2-fix: 38, 33, 28;

    --rgb-white-fix: 255,255,255;
    --rgb-white-1-fix: 250,250,250;
    --rgb-black-fix: 0,0,0;
    --rgb-black-1-fix: 11,11,12;
    --rgb-light-fix: 246,246,246;
    --rgb-light-1-fix: 238,238,238;
    --rgb-light-2-fix: 224,224,224;
    --rgb-dark-fix: 18,18,18;
    --rgb-dark-1-fix: 24,24,24;
    --rgb-dark-2-fix: 40,40,40;
    
    --rgb-white: 255,255,255;
    --rgb-white-1: 250,250,250;
    --rgb-black: 0,0,0;
    --rgb-black-1: 11,11,12;
    --rgb-light: 246,246,246;
    --rgb-light-1: 238,238,238;
    --rgb-light-2: 224,224,224;
    --rgb-dark: 18,18,18;
    --rgb-dark-1: 24,24,24;
    --rgb-dark-2: 40,40,40;

    --rgb-red: 223,69,73;
    --rgb-green: 40,167,69;
    --rgb-blue: 33, 150, 243;
    --rgb-yellow: 255,193,7;
    --rgb-grey: 117,117,117;
    --rgb-info: 33, 150, 243;
    --rgb-alert: 11,109,255;
    --rgb-link: 11,109,255;
    
    --rgb-primary: 133,43,249;
    --rgb-secondary: 253,69,73;
    --rgb-tertiary: 24,23,64;
}
.mode--dark{
    --rgb-black: 255,255,255;
    --rgb-black-1: 250,250,250;
    --rgb-white: 0,0,0;
    --rgb-white-1: 11,11,12;
    --rgb-dark: 246,246,246;
    --rgb-dark-1: 238,238,238;
    --rgb-dark-2: 224,224,224;
    --rgb-light: 18,18,18;
    --rgb-light-1: 24,24,24;
    --rgb-light-2: 40,40,40;

    --rgb-color-2: 217, 222, 227;
    --rgb-color-1: 38, 33, 28;
    
    --invert-value: 1;
}
body {
    --color-transparent: transparent;
    --color-white-fix: rgba(var(--rgb-white-fix),1);
    --color-white-1-fix: rgba(var(--rgb-white-1-fix),1);
    --color-black-fix: rgba(var(--rgb-black-fix),1);
    --color-black-1-fix: rgba(var(--rgb-black-1-fix),1);
    --color-light-fix: rgba(var(--rgb-light-1-fix),1);
    --color-light-1-fix: rgba(var(--rgb-light-1-fix),1);
    --color-light-2-fix: rgba(var(--rgb-light-2-fix),1);
    --color-dark-fix: rgba(var(--rgb-dark-fix),1);
    --color-dark-1-fix: rgba(var(--rgb-dark-1-fix),1);
    --color-dark-2-fix: rgba(var(--rgb-dark-2-fix),1);

    --color-white: rgba(var(--rgb-white),1);
    --color-white-1: rgba(var(--rgb-white-1),1);
    --color-black: rgba(var(--rgb-black),1);
    --color-black-1: rgba(var(--rgb-black-1),1);
    --color-light: rgba(var(--rgb-light),1);
    --color-light-1: rgba(var(--rgb-light-1),1);
    --color-light-2: rgba(var(--rgb-light-2),1);
    --color-dark: rgba(var(--rgb-dark),1);
    --color-dark-1: rgba(var(--rgb-dark-1),1);
    --color-dark-2: rgba(var(--rgb-dark-2),1);

    --color-red: rgba(var(--rgb-red),1);
    --color-green: rgba(var(--rgb-green),1);
    --color-blue: rgba(var(--rgb-blue),1);
    --color-yellow: rgba(var(--rgb-yellow),1);
    --color-grey: rgba(var(--rgb-grey),1);
    --color-link: rgba(var(--rgb-link),1);
    --color-info: rgba(var(--rgb-info),1);
    --color-alert: rgba(var(--rgb-alert),1);
    --color-placeholder: rgba(var(--rgb-black),0.4);

    --color-primary: rgba(var(--rgb-primary),1);
    --color-secondary: rgba(var(--rgb-secondary),1);
    --color-tertiary: rgba(var(--rgb-tertiary),1);

    --k-tomato: #fd4549;
    --k-aquamarine: #0fe8be;
    --k-magenta: #ff48fb;
    --k-yellow: #ffd53d;
    --k-blue-violet: #852bf9;
    --k-dark-slate-blue: #4749a5;
    --k-silver: #bbb;
    --k-grey: grey;
    --k-bright-red: #fc1e23;
    --k-midnight-blue: #181740;

    --bg-gradient-bottom-0: linear-gradient(to bottom, var(--k-yellow), var(--k-tomato));
    --bg-gradient-right-0: linear-gradient(to right, var(--k-yellow), var(--k-tomato));

    --bg-gradient-bottom-1: linear-gradient(to bottom, var(--k-magenta), var(--k-blue-violet));
    --bg-gradient-right-1: linear-gradient(to right, var(--k-magenta), var(--k-blue-violet));

    --bg-gradient-bottom-2: linear-gradient(to bottom, var(--k-tomato), var(--k-yellow));
    --bg-gradient-right-2: linear-gradient(to right, var(--k-tomato), var(--k-yellow));

    --bg-gradient-bottom-3: linear-gradient(to bottom, var(--k-aquamarine), #403db7);
    --bg-gradient-right-3: linear-gradient(to right, var(--k-aquamarine), #403db7);
    
    --bg-gradient-angle-0: linear-gradient(162deg, var(--k-aquamarine), var(--k-blue-violet) 41%, #c22abe 60%, var(--k-bright-red) 89%, #ecc433);
    --bg-gradient-vertical-0: linear-gradient(to bottom, var(--k-yellow) 10%, var(--k-tomato) 33%, #c233bf 60%, var(--k-blue-violet) 100%, var(--k-magenta) 101%);
    --bg-gradient-vertical-1: linear-gradient(to bottom, var(--k-aquamarine), #952bf9 28%, #c234f1 41%, #df36db 52%, #ff353a 84%, var(--k-yellow));

    --text-gradient: linear-gradient(to right, var(--k-yellow), var(--k-magenta) 33%, var(--k-blue-violet) 71%, var(--k-dark-slate-blue));
    --text-gradient-0: linear-gradient(to bottom, var(--k-yellow), var(--k-tomato));
    --text-gradient-1: linear-gradient(to bottom, var(--k-magenta), var(--k-blue-violet));
    --text-gradient-angle-0: linear-gradient(162deg, var(--k-aquamarine), var(--k-blue-violet) 41%, #c22abe 60%, var(--k-bright-red) 89%, #ecc433);

    /* Button Variables */
    --btn-text-rgb: var(--rgb-white-fix);
    --btn-bg-rgb: var(--rgb-primary);
    --btn-border-rgb: var(--rgb-primary);

    /* Border Variables */
    /* --border-color: rgba(var(--rgb-black),0.4); */
    --border-color-dark: rgba(var(--rgb-black),0.8);
    --border-color-light: rgba(var(--rgb-black),0.15);
    --border-color-light-1: rgba(var(--rgb-black-1),0.2);
    --border-color-light-2: rgba(var(--rgb-black-1),0.25);

    /* Section Variables */
    --border-color: rgba(var(--rgb-color-1),1);
    --bg-color: var(--color-white);
	--title-color: rgba(var(--rgb-black),1);
	--text-color: rgba(var(--rgb-black),0.8);
	--bg-color-invert: var(--color-black);
	--text-color-invert: rgba(var(--rgb-white),0.8);

    /* Form Input Field */
    --field-width: 100%;
    --field-font-size: 16px;
    --field-padding: 8px 14px;
    --field-border-color: rgba(var(--rgb-color-1),1);
    --field-text-color: rgba(var(--rgb-black),1);
    --field-bg-color: rgba(var(--rgb-white),1);
    --field-placeholder-color: var(--color-placeholder);
        
}

/* Useful Media QUeries */
/* @media (prefers-reduced-motion) {
    * {
        transition-duration: 0;
    }
} */