@import url("../fonts/mbed.css");
@import url("../css/typo.css");
@import url("../css/header.css");
@import url("../css/footer.css");
@import url("../css/cntnr.css");
@import url("../css/lmnts.css");
@import url("../css/input.css");
@import url("../css/fx.css");

/* === VARIABLES === */

:root {
    --font-size__smallest: clamp(0.375rem, 0.212rem + 0.543vw, 0.688rem);
    --font-size__x-small: clamp(0.563rem, 0.432rem + 0.434vw, 0.813rem);
    --font-size__small: clamp(0.875rem, 0.81rem + 0.217vw, 1rem);
    --font-size__small-reg:  clamp(0.8rem, 0.8rem + ((1vw - 0.2rem) * 0.767), 1rem);
    --font-size__regular: clamp(1.188rem, 1.025rem + 0.543vw, 1.5rem);
    --font-size__medium: clamp(1.25rem, 0.99rem + 0.869vw, 1.75rem);
    --font-size__medium-large: clamp(1.375rem, 0.92rem + 1.52vw, 2.25rem);
    --font-size__large: clamp(2rem, 0.7rem + 4.343vw, 4.5rem);
    --font-size__x-large: clamp(2rem, 0.7rem + 4.343vw, 4.5rem);

    --font-weight__light: 300;
    --font-weight__regular: 400;
    --font-weight__bold: 600;

    --grid__large: clamp(2.5rem, -1.071rem + 11.429vw, 7.5rem);
    --grid__medium: clamp(1.25rem, -1.429rem + 8.571vw, 5rem);
    --grid__small: clamp(0.625rem, -0.714rem + 4.286vw, 2.5rem);
    --grid__x-small: clamp(0.625rem, 0.179rem + 1.429vw, 1.25rem);
    --grid__smallest: clamp(0.375rem, 0.212rem + 0.543vw, 0.688rem);

    /*== COLORS ==*/
    --brand-color-main: #2fede7;
    --main-dark: #20292E;
    --main-medium: #f5f1eb;
    --main-light: #f5f1eb;
    --main-dark-subtile: #23232309;
    --main-light-subtile: #ffffff99;
    --main-dark-grad:linear-gradient(30deg,var(--main-dark) 0%,var(--main-dark-trans) 100%);
    --main-light-grad:linear-gradient(30deg,var(--main-light) 0%,var(--main-light-trans) 100%);
    --color-accept: #2DC460;
    --color-decline: #C45D2D;
    
    --radius-small: 4px;
    --radius-medium: 16px;
    --radius-large: 150px;
}

/* === OVERFLOW === */

body.oxygen, main {
    overflow-x: hidden;
}

/* === DARK MODE === */

body.dark-mode {
    --main-light: #1e1e1e;
    --main-dark: #f1f1f1dd;
    --main-light-trans: #1e1e1edd;
    --main-dark-trans: #f1f1f144;
    --main-lightest: #00000066;
    --main-dark-grad:linear-gradient(30deg,var(--main-dark) 0%,var(--main-dark-trans) 100%);
    --main-light-grad:linear-gradient(30deg,var(--main-light) 0%,var(--main-light-trans) 100%);
    background-image: none !important;
    background-color: #1e1e1e;
}