: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: 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%, #1583d1 67.21%, #1583d1 76.04%, #1583d1 84.9%, #1583d1 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);
}
/* 
.red {
        background: radial-gradient(78.77% 78.77% at 71.71% 30.77%, #f0fcff 0%, #be1e2d 67.21%, #be1e2d 76.04%, #be1e2d 84.9%, #be1e2d 94.79%), url(../img/noise.webp);
        background-blend-mode: color-dodge
}

.blue {
        background: radial-gradient(78.77% 78.77% at 71.71% 30.77%, #0071bcc2 0%, #0071bcc2 67.21%, #0071bcc2 76.04%, #0071bcc2 84.9%, #0071bcc2 94.79%), url(../img/noise.webp);
        background-blend-mode: color-dodge
} */

html,
body {
        margin: 0;
        height: 100%;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
}

.panel {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5em;
        /* text-align: center; */
        position: relative;
        box-sizing: border-box;
        padding: 10px;
        color: var(--color-just-black);
}

body {
        overflow-x: hidden;
        overflow-y: scroll;
}