.blobs-container {
display: flex;
}

.blob {
background: black;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
/* margin: 10px; */
/* height: 20px; */
/* width: 20px; */
transform: scale(1);
animation: pulse-black 2s infinite;
}

@keyframes pulse-black {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}

70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}

100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}

.blob.white {
background: white;
box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
animation: pulse-white 2s infinite;
}

@keyframes pulse-white {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
}

70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}

100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}

.blob.red {
background: rgba(255, 82, 82, 1);
box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
}

70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
}

100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
}
}

.blob.orange {
background: rgba(255, 121, 63, 1);
box-shadow: 0 0 0 0 rgba(255, 121, 63, 1);
animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 121, 63, 0.7);
}

70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(255, 121, 63, 0);
}

100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 121, 63, 0);
}
}

.blob.yellow {
background: rgba(255, 177, 66, 1);
box-shadow: 0 0 0 0 rgba(255, 177, 66, 1);
animation: pulse-yellow 2s infinite;
}

@keyframes pulse-yellow {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 177, 66, 0.7);
}

70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(255, 177, 66, 0);
}

100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 177, 66, 0);
}
}

.blob.blue {
background: rgba(52, 172, 224, 1);
box-shadow: 0 0 0 0 rgba(52, 172, 224, 1);
animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
}

70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(52, 172, 224, 0);
}

100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
}
}

.blob.pink {
background-color: #dd30ee;
box-shadow: 0 0 0 0 rgba(221, 48, 238, 1);
animation: pulse-pink 2s infinite;
}

@keyframes pulse-pink {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(221, 48, 238, 0.7);
}

70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(221, 48, 238, 0);
}

100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(221, 48, 238, 0);
}
}

.blob.purple {
background: rgba(116, 140, 142, 1);
box-shadow: 0 0 0 0 rgba(116, 140, 142, 1);
animation: pulse-purple 2s infinite;
}

@keyframes pulse-purple {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(116, 140, 142, 0.7);
}

70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(116, 140, 142, 0);
}

100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(116, 140, 142, 0);
}
}