*{
    box-sizing: border-box;
}

body {
    background-color: rgb(205, 239, 251);
}

.container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 400px;
    width: 100%;
    align-items: center;
   
}


.bubbles{
    background-color: rgb(16, 193, 232);
    width: 300px;
    height: 300px;
    border-radius: 100%;
    animation: move 4s infinite;
    transition: background-color 0s, height 10s;


}


@keyframes move {

    0%{

        left:-150px;
    }

    100%{
        left:100%;
    }
}


.bubbles:hover{
    background-color: lightblue;
   
}






.medium-bubbles{
    background-color: rgb(16, 193, 232);
    width: 200px;
    height: 200px;
    border-radius: 100%;
    transition: background-color s, height 10s;
   


}

.medium-bubbles:hover{
    background-color: lightblue;
   
}

.small-bubbles{
    background-color: rgb(16, 193, 232);
    width: 100px;
    height: 100px;
    border-radius: 100%;
    transition: background-color s, height 10s;
   


}

.small-bubbles:hover{
    background-color: lightblue;
   
}


.tiny-bubbles{
    background-color: rgb(16, 193, 232);
    width: 50px;
    height: 50px;
    border-radius: 100%;
    transition: background-color s, height 10s;
   


}

.tiny-bubbles:hover{
    background-color: lightblue;
   
}

.tiny-bubbles-move {
    background-color: rgb(16, 193, 232);
    width: 50px;
    height: 50px;
    border-radius: 100%;
    animation: move 4s infinite;

}

@keyframes move {

    0%{

        left:-150px;
    }

    100%{
        left:100%;
    }
}