*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    min-height: 100%;
    background: #0c192c;
    margin:20px 20px;
    color: aliceblue;

}
body header{
    line-height:5px ;
    border: 3px;
    border-color: aliceblue;
}
.container
{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    



}
.bubble
{
    position: fixed;
    display: flex;
    z-index: -100;
}
.bubble span
{
    position: relative;
    width: 30px;
    height: 30px;
    background: #4fc3dc;
    margin: 0 4px;
    border-radius: 50%;
    box-shadow: 0 0 0 10px #4fc3dc44,
    0 0 50px #4fc3dc,
    0 0 100px #4fc3dc;
    animation: animate 15s linear infinite;
    animation-duration: calc(100s/var(--i));
    
}
.bubble span:nth-child(even)
{
    background: #ff2d75;
    box-shadow: 0 0 0 10px #ff2d7544,
    0 0 50px #ff2d75,
    0 0 100px #ff2d75;
}

@keyframes animate
{
    0%
    {
        transform: translateY(100vh) scale(0);
    }
    100%
    {
        transform: translateY(-10vh) scale(1);
    }
}



.mayank{
    
    border-radius: 50%;
    height: 200px;
    border-color: rgb(63, 205, 244);
    
}


.handel_images{
    border-radius:50%;
    height:50px;
    margin-right: 25px;
    margin-left: 25px;
}