.field{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}

#wrapper{
    position:relative;
    z-index:1;
}

.move{
    position:absolute;
    bottom:-100px;
    animation:move 10s linear infinite;
}

.item{
    position:relative;
    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 35%,
            rgba(255,255,255,.55) 0%,
            rgba(220,245,255,.35) 45%,
            rgba(255,220,240,.20) 75%,
            rgba(255,255,255,.08) 100%
        );

    border:1px solid rgba(135,206,250,.30);

    box-shadow:
        inset 0 0 15px rgba(255,255,255,.35),
        inset -8px -8px 12px rgba(173,216,230,.10),
        0 0 4px rgba(135,206,250,.10);
}

.item::after{
    content:"";
    position:absolute;

    top:10%;
    right:14%;

    width:14%;
    height:14%;

    border-radius:50%;

    background:rgba(255,255,255,.95);

    box-shadow:
        -8px 8px 0 2px rgba(255,255,255,.25);

    filter:blur(.5px);
}
.item::before{
    content:"";
    position:absolute;
    inset:6%;
    border-radius:50%;

    border-top:1px solid rgba(135,206,250,.20);
    border-right:1px solid rgba(255,182,193,.18);
    border-bottom:1px solid rgba(255,255,255,.08);
    border-left:1px solid rgba(173,216,230,.15);

    transform:rotate(20deg);
}
.shake{
    animation:shake 3s ease-in-out infinite;
}

@keyframes shake{
    0%{
        transform:translateX(-12px);
    }

    50%{
        transform:translateX(12px);
    }

    100%{
        transform:translateX(-12px);
    }
}

@keyframes move{

    0%{
        transform:
            translateY(0)
            translateX(0);
        opacity:0;
    }

    10%{
        opacity:1;
    }

    50%{
        transform:
            translateY(-60vh)
            translateX(-25px);
    }

    100%{
        transform:
            translateY(-120vh)
            translateX(25px);
        opacity:0;
    }
}