@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(1rem, 0.914rem + 0.282vw, 1.125rem);
    --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(2.25rem, -0.111rem + 7.556vw, 6.5rem);

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

    --grid__large: clamp(5.625rem, 4.583rem + 3.333vw, 7.5rem);
    --grid__medium: clamp(2.5rem, 1.111rem + 4.444vw, 5rem);
    --grid__small: clamp(1.25rem, 0.556rem + 2.222vw, 2.5rem);
    --grid__x-small: clamp(0.625rem, 0.278rem + 1.111vw, 1.25rem);
    --grid__smallest: clamp(0.375rem, 0.167rem + 0.667vw, 0.75rem);

    /*== COLORS ==*/
    --brand-color-main: #1e1e1e;
    --brand-color-sec: #8F4D90FF;
    --brand-color-sec-subtile: #8F4D9022;
    --brand-color-thrd: #A1DCFF;
    --main-dark: #1e1e1e;
    --main-medium: #777777;
    --main-lightest: #fcfcfc;
    --main-light: #f2f2f2;
    --main-dark-subtile: #23232319;
    --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;

    /* == RADII == */
    --radius-small: 4px;
    --radius-medium: 16px;
    --radius-large: 150px;

    /* == GLOW == */
    --card-glow-main: #8F4D90FF;
    --card-glow-main-off: rgb(224, 133, 226);
    --card-glow-sec: transparent;
    --card-glow-radius-outter: 7px;
    --card-glow-radius-inner: calc(var(--card-glow-radius-outter) - 1px);

    /* == BREAKDANCE == */

    --bde-posts-gap: var(--grid__x-small) !important;
}

/* === 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;
}
*/