/* =========================================================
   eChakshu IIoT BACKGROUND
   Lightweight • Responsive • CSS Only
========================================================= */

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
}


body {
    position: relative;

    min-height: 100vh;
    min-height: 100svh;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(33, 150, 243, 0.12),
            transparent 38%
        ),

        radial-gradient(
            circle at 0% 0%,
            rgba(13, 71, 161, 0.07),
            transparent 28%
        ),

        radial-gradient(
            circle at 100% 100%,
            rgba(3, 169, 244, 0.06),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #eaf3f9 0%,
            #ffffff 50%,
            #e7f2f8 100%
        );
}


/* =========================================================
   SUBTLE ELECTRONICS / IIoT GRID
========================================================= */

body::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.22;

    background-image:
        linear-gradient(
            rgba(13, 71, 161, 0.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(13, 71, 161, 0.06) 1px,
            transparent 1px
        );

    background-size:
        clamp(35px, 4vw, 65px)
        clamp(35px, 4vw, 65px);

    /*
     * Keep the grid subtle around the
     * main content area.
     */
    mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            rgba(0, 0, 0, 0.55) 45%,
            transparent 80%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            rgba(0, 0, 0, 0.55) 45%,
            transparent 80%
        );

    z-index: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    body {
        background:
            radial-gradient(
                circle at 50% 45%,
                rgba(33, 150, 243, 0.10),
                transparent 40%
            ),

            linear-gradient(
                135deg,
                #edf6fb,
                #ffffff 50%,
                #e9f4f9
            );
    }


    body::before {
        opacity: 0.16;

        background-size:
            45px 45px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {

    body {
        min-height: 100vh;
        min-height: 100svh;

        background:
            radial-gradient(
                circle at 50% 40%,
                rgba(33, 150, 243, 0.08),
                transparent 45%
            ),

            linear-gradient(
                145deg,
                #eef7fb,
                #ffffff 55%,
                #eaf4f9
            );
    }


    body::before {
        opacity: 0.12;

        background-size:
            38px 38px;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 360px) {

    body::before {
        opacity: 0.09;

        background-size:
            34px 34px;
    }
}


/* =========================================================
   SHORT SCREENS / LANDSCAPE PHONES
========================================================= */

@media (max-height: 600px) {

    body::before {
        opacity: 0.08;
    }
}


/* =========================================================
   LARGE SCREENS
========================================================= */

@media (min-width: 1600px) {

    body::before {
        opacity: 0.25;

        background-size:
            65px 65px;
    }
}