@keyframes desaparecer{
    0% {opacity: 0;}
    
    50% {opacity: 1;}

    100% {opacity: 0;}
}

.r{
    background: linear-gradient(180deg, #FFB876 0%, #FD4688 53.65%, #E11E64 84.9%, #920135 100%);
    animation: desaparecer 3s infinite;

}

.b{
    background: linear-gradient(180deg, #019FA9 0%, #22DCBA 23.96%, #88FFA2 49.48%, #D1FFF4 100%);
    animation: desaparecer 5s infinite;
}

.a{
    background: linear-gradient(180deg, #FFFFFF 0%, #FFE458 38.02%, #E17C1E 100%);
    animation: desaparecer 7s infinite;
}

.circle-p{
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    z-index: 0;
}

#circle-p-uno{
    left: 10%;
    top: 14%;

}

#circle-p-dos{
    left:  60%;
    top: 18%;


}

#circle-p-tres{
    left:  80%;
    top: 15%;


}

#circle-p-cuatro{
    left:  6%;
    top: 85%;
    width: 30px;
    height: 30px;
}

#circle-p-cinco{
    left:  90%;
    top: 70%;
    width: 30px;
    height: 30px;
}

#circle-p-seis{
    left: 10%;
    top: 120%;
}

.circle-m{
    position: absolute;
    width: 65px;
    height: 65px;
    border-radius: 100%;
}

#circle-m-uno{
    left: 20%;
    top: 30%;
}

#circle-m-dos{
    left: 76%;
    top: 55%;
}

#circle-m-tres{
    left: 22%;
    top: 70%;
}

#circle-m-cuatro{
    left: 70%;
    top: 75%;
}

#circle-m-cinco{
    left: 38%;
    top: 182%;
}

.circle-g{
    position:absolute;
    width: 148px;
    height: 148px;
    border-radius: 100%;

}

#circle-g-uno{
    left: 8%;
    top: 45%;
}

#circle-g-dos{
    left: 80%;
    top: 28%;
}

#circle-g-tres{
    left: 75%;
    top: 110%;
}