:root {
    /*   new */
    --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: #201F1F;
    --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%
    );

    --dark: var(--color-just-black);
    --grey-dark: var(--color-surface-25);
    --light: var(--color-surface-white);
    --mid: var(--color-surface-50);
    --grey: var(--color-grey);
    --gray: var(--color-grey);
    --green: var(--color-shockingly-green);
    --green-dark: var(--color-shockingly-green);
    --green-light: var(--color-lt-green);
    --blue: var(--color-blue);
    --purple: var(--color-lilac);
    --red: var(--color-pink);
    --orange: var(--color-orangey);
    accent-color: var(--color-shockingly-green);
}

body {
    color: var(--color-surface75);
    background-color: var(--dark);
    font-family: "Big Shoulders", sans-serif;
    font-weight: 400;
    margin: 0;
    line-height: 1.45;
}

button {
    display: inline-block;
    outline: none;
    padding: 8px 14px;
    background: var(--dark);
    border: solid 2px var(--light);
    color: var(--light);
    text-decoration: none;
    border-radius: 99px;
    padding: 12px 25px;
    font-weight: 600;
    cursor: pointer;
    line-height: 18px;
}