/* ==========================================================
   PLANET NETWORK NUSANTARA
   BACKGROUND STYLE
========================================================== */

body{

    margin:0;

    min-height:100vh;

    overflow-x:hidden;

    position:relative;

    background:

        radial-gradient(circle at top left,
        rgba(48,199,239,.25) 0%,
        transparent 30%),

        radial-gradient(circle at bottom right,
        rgba(8,127,194,.18) 0%,
        transparent 28%),

        linear-gradient(
            135deg,
            #eefbff 0%,
            #ffffff 48%,
            #edf9ff 100%
        );

    background-attachment:fixed;

}

/* ==========================
   ORB
========================== */

.bg-orb{

    position:fixed;

    border-radius:50%;

    pointer-events:none;

    z-index:-2;

    opacity:.55;

    filter:blur(5px);

    animation:floatOrb 11s ease-in-out infinite;

}

.orb-1{

    width:320px;
    height:320px;

    top:-120px;
    left:-90px;

    background:#31c8ef;

}

.orb-2{

    width:260px;
    height:260px;

    right:-90px;
    top:38%;

    background:#0a87ca;

    animation-delay:2s;

}

.orb-3{

    width:340px;
    height:340px;

    right:-120px;
    bottom:-120px;

    background:#55c9ef;

    animation-delay:4s;

}

/* ==========================
   LIGHT
========================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-3;

    background:

        radial-gradient(circle at center,

        rgba(255,255,255,.55),

        transparent 65%);

}

/* ==========================
   NOISE
========================== */

body::after{

    content:"";

    position:fixed;

    inset:0;

    z-index:-4;

    pointer-events:none;

    opacity:.18;

    background-image:

    radial-gradient(rgba(255,255,255,.55) 1px, transparent 1px);

    background-size:24px 24px;

}

/* ==========================
   FLOAT
========================== */

@keyframes floatOrb{

    0%{

        transform:

        translateY(0)

        scale(1);

    }

    50%{

        transform:

        translateY(24px)

        scale(1.06);

    }

    100%{

        transform:

        translateY(0)

        scale(1);

    }

}

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

@media(max-width:768px){

    .orb-1{

        width:180px;
        height:180px;

        left:-70px;
        top:-60px;

    }

    .orb-2{

        width:150px;
        height:150px;

    }

    .orb-3{

        width:180px;
        height:180px;

    }

}