:root {
            --hb-grid-size: 40px;
            --hb-bg: var(--color-bg, #ffffff);
            --hb-grid-line: rgba(100, 116, 139, 0.09);
            --hb-blue: rgba(37, 99, 235, 0.08);
            --hb-purple: rgba(139, 92, 246, 0.065);
            --hb-cyan: rgba(6, 182, 212, 0.05);
            --hb-box-blue: rgba(37, 99, 235, 0.075);
            --hb-box-purple: rgba(139, 92, 246, 0.065);
            --hb-box-cyan: rgba(6, 182, 212, 0.055);
        }



        body {
            min-height: 100vh;
            margin: 0;

            background-color: var(--hb-bg);

            background-image:

                /* Vertical grid */
                linear-gradient(to right,
                    var(--hb-grid-line) 1px,
                    transparent 1px),

                /* Horizontal grid */
                linear-gradient(to bottom,
                    var(--hb-grid-line) 1px,
                    transparent 1px),

                /* Blue soft gradient */
                radial-gradient(ellipse 650px 500px at 85% 12%,
                    var(--hb-blue),
                    transparent 75%),

                /* Purple soft gradient */
                radial-gradient(ellipse 550px 450px at 8% 60%,
                    var(--hb-purple),
                    transparent 75%),

                /* Cyan soft gradient */
                radial-gradient(ellipse 450px 400px at 90% 90%,
                    var(--hb-cyan),
                    transparent 75%);

            background-size:
                var(--hb-grid-size) var(--hb-grid-size),
                var(--hb-grid-size) var(--hb-grid-size),
                auto,
                auto,
                auto;

            background-repeat:
                repeat,
                repeat,
                no-repeat,
                no-repeat,
                no-repeat;

            background-attachment: fixed;

            color: var(--color-text, #0f172a);
        }

     

        body::before {
            content: "";

            position: fixed;
            inset: 0;

            z-index: 0;
            pointer-events: none;

            background-image:

                linear-gradient(var(--hb-box-blue),
                    var(--hb-box-blue)),

                linear-gradient(var(--hb-box-purple),
                    var(--hb-box-purple)),

                linear-gradient(var(--hb-box-cyan),
                    var(--hb-box-cyan)),

                linear-gradient(var(--hb-box-blue),
                    var(--hb-box-blue)),

                linear-gradient(var(--hb-box-purple),
                    var(--hb-box-purple));

            background-size:
                var(--hb-grid-size) var(--hb-grid-size),
                calc(var(--hb-grid-size) * 2) var(--hb-grid-size),
                var(--hb-grid-size) calc(var(--hb-grid-size) * 2),
                var(--hb-grid-size) var(--hb-grid-size),
                var(--hb-grid-size) var(--hb-grid-size);

            background-position:
                12% 18%,
                82% 28%,
                22% 75%,
                88% 82%,
                55% 48%;

            background-repeat: no-repeat;

            opacity: .8;
        }



        [data-theme="dark"] {
            --hb-bg: var(--color-bg, #080d18);

            --hb-grid-line: rgba(148, 163, 184, 0.075);

            --hb-blue: rgba(59, 130, 246, 0.11);
            --hb-purple: rgba(139, 92, 246, 0.09);
            --hb-cyan: rgba(6, 182, 212, 0.075);

            --hb-box-blue: rgba(59, 130, 246, 0.10);
            --hb-box-purple: rgba(139, 92, 246, 0.09);
            --hb-box-cyan: rgba(6, 182, 212, 0.08);
        }



        @media (max-width: 992px) {
            :root {
                --hb-grid-size: 36px;
            }
        }

        @media (max-width: 768px) {
            :root {
                --hb-grid-size: 30px;
            }

            body {
                background-attachment: scroll;
            }

            body::before {
                opacity: .55;
            }
        }

        @media (max-width: 480px) {
            :root {
                --hb-grid-size: 26px;
            }
        }