body {
    margin: 0;
    background: rgb(255, 208, 0);
}
.titulo {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color:rgba(59, 50, 9, 0.781);
    margin-top:20vh;
    animation: flotar 2s linear infinite alternate;
}
@keyframes flotar {
    to {
        margin-top: 15vh;
    }
}

.burbujas div {
    
    background: rgba(226, 149, 7, 0.781);
    border-radius:100%;
    position:absolute;
    bottom: 0;
    animation: animarburbujas 4s linear infinite;
}
.burbujas div:nth-child(1) {
    width:35px;
    height: 32px;
    left:10px;
    animation-duration:4s;
}
.burbujas div:nth-child(2){
    width:45px;
    height: 42px;
    left:25%;
    animation-duration:9s;

}
.burbujas div:nth-child(3){
    width:45px;
    height: 42px;
    left:98%;
    animation-duration:9s;

}
.burbujas div:nth-child(4) {
    width:35px;
    height: 32px;
    left:40px;
    animation-duration:4s;
}
.burbujas div:nth-child(5){
    width:45px;
    height: 42px;
    left:65%;
    animation-duration:9s;

}
.burbujas div:nth-child(6){
    width:45px;
    height: 42px;
    left:78%;
    animation-duration:9s;

}
@keyframes animarburbujas{
    0%{
        width:0;
        height: 0;
    }
    3%{
        width: 20px;
        height: 15px;
    }
    50%{
        margin-left: 20px;
        opacity: 0.3;
    }
    100%{
        transform:rotate(90deg);
        bottom:100vh;

    }
}