.sky {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.balloon {
    position: absolute;
    bottom: -140px;
    width: 100px;
    height: 100px;
    will-change: transform, opacity;
    opacity: 0;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
    animation-fill-mode: forwards;
}

@keyframes rise {
    0% 
    {
        transform: translateY(0) translateX(0) scale(var(--scale)) rotate(var(--rot));
        opacity: 0;
    }
    5%
    { 
        opacity: 1;
    }
    100%
    {
        transform: translateY(calc(-120vh - 200px)) translateX(var(--drift)) scale(var(--scale)) rotate(calc(var(--rot) + 10deg));
        opacity: 0;
    }
}

@media (max-width:420px) {
    .balloon 
    {
        width:72px;
        height:72px;
    }
}