/*
 * Butterfly Liquid Glass
 * Apple + Material You Background System v2.1
 *
 * Pure CSS ambient background
 *
 * Light:
 *   Apple style soft ambient
 *
 * Dark:
 *   Material You / Material 3 inspired
 *
 */


/* ==========================================
   Light Mode
========================================== */


#web_bg {


    background-color:

    #f5f5f7 !important;



    background-image:



    /* Warm ambient light */

    radial-gradient(
        circle at 15% 10%,
        rgba(255,190,210,.28),
        transparent 32%
    ),



    /* Cool ambient light */

    radial-gradient(
        circle at 90% 20%,
        rgba(190,220,255,.25),
        transparent 35%
    ),



    /* Purple bottom light */

    radial-gradient(
        circle at 55% 100%,
        rgba(220,205,255,.22),
        transparent 38%
    ),



    /* Base surface */

    linear-gradient(
        180deg,
        #fafafa,
        #f3f3f7
    )

    !important;



    background-attachment:

    fixed;



    background-size:

    cover;


}



/* ==========================================
   Dark Mode
   Material You Style
========================================== */


[data-theme="dark"]

#web_bg {


    background-color:

    #101114 !important;



    background-image:



    /* Primary blue ambient */

    radial-gradient(
        circle at 15% 15%,
        rgba(120,150,255,.14),
        transparent 38%
    ),



    /* Pink accent */

    radial-gradient(
        circle at 85% 20%,
        rgba(255,120,180,.10),
        transparent 35%
    ),



    /* Green cyan ambient */

    radial-gradient(
        circle at 50% 100%,
        rgba(120,220,200,.08),
        transparent 42%
    ),



    /* Material Surface */

    linear-gradient(
        180deg,
        #17181d,
        #101114
    )

    !important;



    background-attachment:

    fixed;



    background-size:

    cover;


}




/* ==========================================
   Remove Butterfly Default Background
========================================== */


body {


    background-image:none;


}



/* ==========================================
   Glass Atmosphere Layer
========================================== */


#web_bg::before {


    content:"";


    position:fixed;


    inset:0;


    pointer-events:none;



    background:


    linear-gradient(

        120deg,

        rgba(255,255,255,.08),

        transparent 40%

    );



    z-index:-1;


}



/* ==========================================
   Dark Glass Atmosphere
========================================== */


[data-theme="dark"]

#web_bg::before {


    background:


    linear-gradient(

        120deg,

        rgba(255,255,255,.035),

        transparent 45%

    );


}



/* ==========================================
   Dark Surface Correction
========================================== */


[data-theme="dark"]

body {


    background-color:

    #101114;


}