: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: #191919;
    --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: #201f1f;
    --light: var(--color-surface-white);
    --mid: #7c7c6f;
    --grey: var(--color-grey);
    --gray: var(--color-grey);
    --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);
    }

:root {
    --fluid-min-width: 765;
    --fluid-max-width: 1200;
    --fluid-screen: 100vw;

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

    --text-lg: calc( 1rem * var(--fluid-bp) );
    }

.box {
    max-width: calc(var(--fluid-max-width) / 16 * 1rem);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--dark);
    background: var(--gradient-macha), url(https://assets.codepen.io/16327/noise-e82662fe.png);
    background-blend-mode: color-dodge;
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.2;
    will-change: transform;    
}
.box.green,
.gradient-green {
color: var(--dark);
background: var(--gradient-macha),
    url("https://assets.codepen.io/16327/noise-e82662fe.png"); /* Replace with the path to your noise texture image */
background-blend-mode: color-dodge; /* Blend the noise texture with the gradient */
}

.box.green-lt,
.gradient-green-2 {
color: var(--dark);
background: var(--gradient-emerald-city),
    url("https://assets.codepen.io/16327/noise-e82662fe.png"); /* Replace with the path to your noise texture image */
background-blend-mode: color-dodge; /* Blend the noise texture with the gradient */
}

.box.orange,
.gradient-orange {
color: var(--dark);
background: var(--gradient-orange-crush),
    url("https://assets.codepen.io/16327/noise.png"); /* Replace with the path to your noise texture image */
background-blend-mode: color-dodge; /* Blend the noise texture with the gradient */
}

.box.purple,
.gradient-purple {
color: var(--dark);
background: var(--gradient-purple-haze),
    url("https://assets.codepen.io/16327/noise.png"); /* Replace with the path to your noise texture image */
background-blend-mode: color-dodge; /* Blend the noise texture with the gradient */
}

.box.blue-lt .gradient-blue-2 {
color: var(--dark);
background: var(--gradient-summer-fair),
    url("https://assets.codepen.io/16327/noise.png"); /* Replace with the path to your noise texture image */
background-blend-mode: color-dodge; /* Blend the noise texture with the gradient */
}

.box.blue,
.gradient-blue {
color: var(--dark);
background: var(--color-ui-gradient),
    url("https://assets.codepen.io/16327/noise-e82662fe.png"); /* Replace with the path to your noise texture image */
background-blend-mode: color-dodge; /* Blend the noise texture with the gradient */
}

.box.red,
.gradient-red {
color: var(--dark);
background: var(--gradient-lipstick),
    url("https://assets.codepen.io/16327/noise.png"); /* Replace with the path to your noise texture image */
background-blend-mode: color-dodge; /* Blend the noise texture with the gradient */
}

.box.pink,
.gradient-pink {
color: var(--dark);
background: var(--color-scroll-gradient),
    url("https://assets.codepen.io/16327/noise.png"); /* Replace with the path to your noise texture image */
background-blend-mode: color-dodge; /* Blend the noise texture with the gradient */
}

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

button {
    display: inline-block;
    outline: none;
    background: var(--dark);
    border: solid 2px var(--color-surface75);
    color: var(--color-surface75);
    text-decoration: none;
    border-radius: 99px;
    padding: 6px 10px;
    cursor: pointer;
    line-height: 1;
    font-size: 0.9rem;
    transition: opacity 0.2s ease-out;
  }

  button:hover {
    border: solid 2px var(--light);
    color: var(--light);
  }