/* ==========================================
   PREMIUM BACKGROUND V1
   ========================================== */

html{
    scroll-behavior:smooth;
}

body{

    background:
    radial-gradient(circle at 8% 12%, rgba(13,77,139,.16), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(37,99,235,.12), transparent 30%),
    radial-gradient(circle at 50% 95%, rgba(13,77,139,.10), transparent 35%),
    linear-gradient(
        180deg,
        #FCFEFF 0%,
        #F6FAFE 25%,
        #EEF5FC 65%,
        #EAF2F8 100%
    );

    background-attachment:fixed;

}
/* ===========================================
   PREMIUM AMBIENT LIGHT
=========================================== */

body::before{

    content:"";

    position:fixed;

    width:900px;

    height:900px;

    left:-350px;

    top:-300px;

    background:radial-gradient(circle,
    rgba(13,77,139,.22) 0%,
    rgba(13,77,139,.08) 30%,
    transparent 70%);

    filter:blur(70px);

    animation:ambientOne 18s ease-in-out infinite alternate;

    pointer-events:none;

    z-index:-1;

}

body::after{

    content:"";

    position:fixed;

    width:850px;

    height:850px;

    right:-320px;

    bottom:-320px;

    background:radial-gradient(circle,
    rgba(37,99,235,.18) 0%,
    rgba(37,99,235,.06) 35%,
    transparent 75%);

    filter:blur(70px);

    animation:ambientTwo 20s ease-in-out infinite alternate;

    pointer-events:none;

    z-index:-1;

}

@keyframes ambientOne{

    from{

        transform:
        translate(0px,0px)
        scale(1);

    }

    to{

        transform:
        translate(80px,40px)
        scale(1.15);

    }

}

@keyframes ambientTwo{

    from{

        transform:
        translate(0px,0px)
        scale(1);

    }

    to{

        transform:
        translate(-80px,-50px)
        scale(1.2);

    }

}

#particles{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:0;

}

.particle{

    position:absolute;

    bottom:-60px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,255,255,.9) 0%,
        rgba(140,190,255,.35) 40%,
        transparent 100%
    );

    filter:blur(8px);

    opacity:.45;

    animation:floatParticle linear infinite;

}