* {
    user-select: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: none;
}

img {
    background-image: linear-gradient(to bottom, red, blue);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top 100vh right;
    pointer-events: none;
}


.bubble {
    position: absolute;
    z-index: 4;
    border: 4px solid rgb(14, 124, 168);
    background-image: linear-gradient(to bottom, rgba(0, 0, 255, 0.308), rgba(0, 174, 255, 0.496));
    border-radius: 50%;
}

#particle {
    width: 1%;
    height: 5%;
    top: 10%;
    left: 20%;
    position: absolute;
    opacity: 0;
    animation: spread 0.3s cubic-bezier( 0.55, 0.085, 0.68, 0.53 );
}

@keyframes spread {
    from {
        transform: translate(0%, 0%);
        opacity: 0;
    }

    15% {
        opacity: 0.5;
    }

    99% {
        opacity: 1;
    }

    to {
        transform: translate(0%, -200%);
        opacity: 0;
    }
}

@keyframes shake {
    from {
        rotate: 0deg;
    }

    25% {
        rotate: 5deg;
    }

    75% {
        rotate: -5deg;
    }

    to {
        rotate: 0deg;
    }
}