:root {
    --color-shockingly-green: #0ae448;
    --color-just-black: #0e100f;
    --color-surface-white: #fffce1;
    --color-pink: #fec5fb;
    --color-shockingly-pink: #f100cb;
    --color-orangey: #ff8709;
    --color-lilac: #9d95ff;
    --color-lt-green: #abff84;
    --color-blue: #00bae2;
    --color-grey: gray;
    --color-surface75: #bbbaa6;
    --color-surface50: #7c7c6f;
    --color-surface25: #42433d;

    --gradient-macha: linear-gradient(114.41deg,
            var(--color-shockingly-green) 20.74%,
            var(--color-lt-green) 65.5%);
    --gradient-orange-crush: linear-gradient(111.45deg,
            var(--color-orangey) 19.42%,
            #f7bdf8 73.08%);
    --gradient-lipstick: linear-gradient(165.72deg,
            #f7bdf8 21.15%,
            #cd237f 81.93%);
    --gradient-purple-haze: linear-gradient(153.58deg,
            #f7bdf8 32.25%,
            #2f3cc0 92.68%);
    --gradient-skyfall: linear-gradient(131.77deg,
            #0a157a 30.82%,
            #15bfe4 81.82%);
    --gradient-emerald-city: linear-gradient(166.9deg,
            var(--color-shockingly-green) 53.19%,
            #0085d0 107.69%);
    --gradient-summer-fair: linear-gradient(144.02deg,
            var(--color-blue) 4.56%,
            var(--color-pink) 72.98%);

    --color-core-green: #dfffd1;
    --color-core-green-lt: #f3ffee;
    --color-core-gradient: radial-gradient(89.08% 84.62% at 16.54% 78.46%,
            #fbfefa 0%,
            #c9f6b4 39.58%,
            #abff84 77.6%,
            #2fee65 100%);
    --color-core-button-gradient: linear-gradient(114.41deg,
            #0ae448 20.74%,
            #abff84 65.5%);
    --color-core-heading-gradient: linear-gradient(180deg,
            #d6ffc3 0%,
            rgba(214, 255, 195, 0) 100%),
        #f3ffee;
    --color-core-intro-gradient: linear-gradient(144.5deg,
            #e8ffdd 65.09%,
            #7dea7b 122.73%),
        linear-gradient(311.31deg, #7ef89e 36.08%, #e5ffd9 106.98%);

    --color-text-purple: #d2ceff;
    --color-text-purple-lt: #dfdcff;

    --color-text-gradient: radial-gradient(129.03% 100% at 120.97% 81.45%,
            #dfdcff 27.08%,
            #a69eff 100%);

    --color-svg-tangerine: #ffe3c7;
    --color-svg-tangerine-lt: #fff0e0;
    --color-svg-gradient: radial-gradient(70.77% 70.77% at 0% 70.77%,
            #ffd9b0 0%,
            #fd9f3b 80.73%,
            #ff8709 100%);
    --color-svg-heading-gradient: linear-gradient(180deg,
            #ffbd77 0%,
            rgba(254, 197, 251, 0) 100%),
        #ffe4c7;

    --color-ui-blue: #bef3fe;
    --color-ui-blue-lt: #e1faff;
    --color-ui-blue-codeblk: #f6feff;
    --color-ui-text-gradient: linear-gradient(168.89deg,
            #fec5fb -21.3%,
            #00bae2 89.88%);
    --color-ui-code-blocktext-gradient: linear-gradient(142.91deg,
            #cef6ff 18.75%,
            #a6efff 54.93%);
    --color-ui-gradient: radial-gradient(78.77% 78.77% at 71.71% 30.77%,
            #f0fcff 0%,
            #9bedff 67.21%,
            #98ecff 76.04%,
            #5be1ff 84.9%,
            #00bae2 94.79%);
    --color-ui-gradient-background: linear-gradient(137.1deg,
            #ecfcff 27.5%,
            #a6efff 94.09%);
    --color-ui-gradient-flip-background: radial-gradient(140% 190% at 117.54% 131.12%,
            #f0fcff 0%,
            #9bedff 25.52%,
            #98ecff 42.71%,
            #5be1ff 60.94%,
            #00bae2 94.79%);

    --color-scroll-pink: #ffd7fd;
    --color-scroll-pink-lt: #ffe9fe;
    --color-scroll-gradient: linear-gradient(317.42deg,
            #ffe9fe 10.4%,
            #ff96f9 83.03%);

    --ease-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.86, 0, 0.07, 1);
    --ease-out-quart: cubic-bezier(0.175, 0.79, 0.38, 0.905);
    --ease-in-out-quart: cubic-bezier(0.645, 0.045, 0.355, 1);
}

:root {
    --dark: var(--color-just-black);
    --grey-dark: #42433d;
    --light: var(--color-surface-white);
    --mid: #7c7c6f;
    --grey: #gray;
    --gray: #gray;
    --green: var(--color-shockingly-green);
    --green-dark: #0ae448;
    --green-light: var(--color-lt-green);
    --blue: var(--color-blue);
    --purple: var(--color-lilac);
    --red: #cd237f;
    --orange: var(--color-orangey);
    accent-color: var(--color-shockingly-green);
}

/* lovely fluid fonts */

:root {
    --fluid-min-width: 320;
    --fluid-max-width: 1140;

    --fluid-screen: 100vw;
    --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));
}

@media screen and (min-width: 1140px) {
    :root {
        --fluid-screen: calc(var(--fluid-max-width) * 1px);
    }
}

:root {
    --f-0-min: 16;
    --f-0-max: 18;
    --step-0: calc(((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp));

    --f-1-min: 16;
    --f-1-max: 22.5;
    --step-1: calc(((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp));

    --f-2-min: 23.04;
    --f-2-max: 28.13;
    --step-2: calc(((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp));

    --f-3-min: 27.65;
    --f-3-max: 35.16;
    --step-3: calc(((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp));

    --f-4-min: 33.18;
    --f-4-max: 46;
    --step-4: calc(((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp));
}

/* fluid paddings */

:root {
    --fluid-min-width: 320;
    --fluid-max-width: 1140;

    --fluid-screen: 100vw;
    --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));
}

@media screen and (min-width: 1140px) {
    :root {
        --fluid-screen: calc(var(--fluid-max-width) * 1px);
    }
}

:root {
    --fc-s-min: (var(--f-0-min, 21));
    --fc-s-max: (var(--f-0-max, 24));

    --fc-m-min: (var(--fc-s-min) * 6);
    --fc-m-max: (var(--fc-s-max) * 6);

    --fc-l-min: (var(--fc-s-min) * 8);
    --fc-l-max: (var(--fc-s-max) * 8);

    --fc-xl-min: (var(--fc-s-min) * 10);
    --fc-xl-max: (var(--fc-s-max) * 10);

    /* T-shirt sizes */
    --space-s: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp));
    --space-m: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp));
    --space-l: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp));
    --space-xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp));

    /* One-up pairs */
    --space-s-m: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) * var(--fluid-bp));
    --space-m-l: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) * var(--fluid-bp));
    --space-l-xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) * var(--fluid-bp));
}

.flair {
    width: 100px;
    height: 100px;
    background-image: url("https://assets.codepen.io/16327/flair.png");
    background-size: contain;
    background-repeat: no-repeat;
    will-change: transform;
}

.flair--2 {
    background-image: url("https://assets.codepen.io/16327/flair-2.png");
}

.flair--3 {
    background-image: url("https://assets.codepen.io/16327/flair-3.png");
}

.flair--4 {
    background-image: url("https://assets.codepen.io/16327/flair-4.png");
}

.flair--5 {
    background-image: url("https://assets.codepen.io/16327/flair-5.png");
}

.flair--6 {
    background-image: url("https://assets.codepen.io/16327/flair-6.png");
}

.flair--7 {
    background-image: url("https://assets.codepen.io/16327/flair-7.png");
}

.flair--8 {
    background-image: url("https://assets.codepen.io/16327/flair-8.png");
}

.flair--9 {
    background-image: url("https://assets.codepen.io/16327/flair-9.png");
}

.flair--10 {
    background-image: url("https://assets.codepen.io/16327/flair-10.png");
}

.flair--11 {
    background-image: url("https://assets.codepen.io/16327/flair-11.png");
}

.flair--12 {
    background-image: url("https://assets.codepen.io/16327/flair-12.png");
}

.flair--13 {
    background-image: url("https://assets.codepen.io/16327/flair-13.png");
}

.flair--14 {
    background-image: url("https://assets.codepen.io/16327/flair-14.png");
}

.flair--15 {
    background-image: url("https://assets.codepen.io/16327/flair-15.png");
}

.flair--16 {
    background-image: url("https://assets.codepen.io/16327/flair-16.png");
}

.flair--17 {
    background-image: url("https://assets.codepen.io/16327/flair-17.png");
}

.flair--18 {
    background-image: url("https://assets.codepen.io/16327/flair-18.png");
}

.flair--19 {
    background-image: url("https://assets.codepen.io/16327/flair-19.png");
}

.flair--20 {
    background-image: url("https://assets.codepen.io/16327/flair-20.png");
}

.flair--21 {
    background-image: url("https://assets.codepen.io/16327/flair-21.png");
}

.flair--22 {
    background-image: url("https://assets.codepen.io/16327/flair-22.png");
}

.flair--23 {
    background-image: url("https://assets.codepen.io/16327/flair-23.png");
}

.flair--24 {
    background-image: url("https://assets.codepen.io/16327/flair-24.png");
}

.flair--25 {
    background-image: url("https://assets.codepen.io/16327/flair-25.png");
}

.flair--26 {
    background-image: url("https://assets.codepen.io/16327/flair-26.png");
}

.flair--27 {
    background-image: url("https://assets.codepen.io/16327/flair-27.png");
}

.flair--28 {
    background-image: url("https://assets.codepen.io/16327/flair-28.png");
}

.flair--29 {
    background-image: url("https://assets.codepen.io/16327/flair-29.png");
}

.flair--30 {
    background-image: url("https://assets.codepen.io/16327/flair-30.png");
}

.flair--31 {
    background-image: url("https://assets.codepen.io/16327/flair-31.png");
}

.flair--32 {
    background-image: url("https://assets.codepen.io/16327/flair-32.png");
}

.flair--33 {
    background-image: url("https://assets.codepen.io/16327/flair-33.png");
}

.flair--34 {
    background-image: url("https://assets.codepen.io/16327/flair-34.png");
}

.flair--35 {
    background-image: url("https://assets.codepen.io/16327/flair-35.png");
}

.flair--36 {
    background-image: url("https://assets.codepen.io/16327/flair-36.png");
}

.flair-cont {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 2rem;
    flex-wrap: wrap;
}

.box {
    width: 100px;
    height: 100px;
}

.box.green,
.gradient-green {
    background: var(--gradient-macha),
        url('https://assets.codepen.io/16327/noise-e82662fe.png');
    background-blend-mode: color-dodge;
}

.box.green-lt,
.gradient-green-2 {
    background: var(--gradient-emerald-city),
        url('https://assets.codepen.io/16327/noise-e82662fe.png');
    background-blend-mode: color-dodge;
}

.box.orange,
.gradient-orange {
    background: var(--gradient-orange-crush),
        url('https://assets.codepen.io/16327/noise.png');
    background-blend-mode: color-dodge;
}

.box.purple,
.gradient-purple {
    background: var(--gradient-purple-haze),
        url('https://assets.codepen.io/16327/noise.png');
    background-blend-mode: color-dodge;
}

.box.blue-lt .gradient-blue-2 {
    background: var(--gradient-summer-fair),
        url('https://assets.codepen.io/16327/noise.png');
    background-blend-mode: color-dodge;
}

.box.blue,
.gradient-blue {
    background: var(--color-ui-gradient),
        url('https://assets.codepen.io/16327/noise-e82662fe.png');
    background-blend-mode: color-dodge;
}

.box.red,
.gradient-red {
    background: var(--gradient-lipstick),
        url('https://assets.codepen.io/16327/noise.png');
    background-blend-mode: color-dodge;
}

.box.pink,
.gradient-pink {
    background: var(--color-scroll-gradient),
        url('https://assets.codepen.io/16327/noise.png');
    background-blend-mode: color-dodge;
}

.noise {
    position: relative;
}

.noise:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: url('https://assets.codepen.io/16327/noise.png');
    opacity: 0.4;
    pointer-events: none;
}