#balloon-container{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:9999;
}

.balloon{
    position:absolute;
    bottom:-150px;
    border-radius:50% 50% 45% 45%;
    display:flex;
    justify-content:center;
    align-items:center;
    animation:rise linear forwards;
    box-shadow:
        inset -6px -8px rgba(0,0,0,.12),
        inset 6px 6px rgba(255,255,255,.25);
}

.balloon::after{
    content:"";
    position:absolute;
    width:2px;
    height:60px;
    background:#666;
    top:100%;
    left:50%;
    transform:translateX(-50%);
}

.chakra{
    width:90%;
    height:90%;
    animation:spinChakra 15s linear infinite;
}

@keyframes rise{

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

    25%{
        transform:translateY(-25vh) translateX(-20px) rotate(-5deg);
    }

    50%{
        transform:translateY(-50vh) translateX(20px) rotate(5deg);
    }

    75%{
        transform:translateY(-75vh) translateX(-15px) rotate(-5deg);
    }

    100%{
        transform:translateY(-120vh) translateX(15px) rotate(5deg);
        opacity:0;
    }

}

@keyframes spinChakra{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}