#blob-outer-container{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    /* min-height: 100vh; */
    padding-block: 50px;
width: 100%;
}
.blob-container{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  
flex-direction: column;
}
.blob-outer-ring{
    transition: .3s;

    cursor: pointer;
    padding: 10px;
    border: 1px solid rgba(62, 62, 62, 0.263);
    border-radius: 50%;
}
.blob-outer-ring:hover .blob{
  animation-play-state: paused;

}
.blob-outer-ring:hover {
  scale: .95;

}
.blob-ring{
    padding: 10px;
    background: linear-gradient(45deg, rgba(13, 0, 255, 0.352), rgba(142, 232, 255, 0.292));
    /* border: 1px solid rgba(66, 66, 66, 0.126); */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.199);
    border-radius: 50%;
}
.blob{
    transition: .3s;
    /* position: absolute; */
width: 100px;
height: 100px ;
    background: linear-gradient(45deg, rgb(13, 0, 255), rgb(142, 232, 255));
overflow: hidden;
transition: .4s;
animation: blob 4s linear infinite;

}
.blob img{
    /* position: absolute; */
width: 100%;
height: 100% ;
-o-object-fit: cover;
   object-fit: cover;
-o-object-position: center;
   object-position: center;
}
@keyframes blob {
   0%,100%{
   border-radius:  30% 70% 70% 30% / 30% 30% 70% 70% ;
   } 
   25%{
    border-radius: 30% 70% 50% 50% / 68% 58% 42% 32%;
   }
   50%{
    border-radius:74% 26% 68% 32% / 37% 74% 26% 63%  ;
}
75%{
       border-radius: 56% 44% 39% 61% / 47% 52% 48% 53%  ;

   }
}

.blob-info h3{
    font-size: 50px;
    font-weight: 700;
    text-align: center;
}
.blob-info p{
    font-size: 15px;
    color: rgb(95, 95, 95);
    font-weight: 400;
    text-align: center;
}