/* styles for blob animation */
@keyframes moveBlob1 {
    0% { top: 10%; left: 10%; transform: scale(1.1); }
    100% { top: 60%; left: 50%; transform: scale(1.3); }
}

@keyframes moveBlob2 {
    0% { top: 50%; left: 30%; transform: scale(1.2); }
    100% { top: 20%; left: 80%; transform: scale(1.4); }
}

@keyframes moveBlob3 {
    0% { top: 20%; left: 60%; transform: scale(1.1); }
    100% { top: 80%; left: 40%; transform: scale(1.5); }
}

@keyframes moveBlob4 {
    0% { top: 70%; left: 20%; transform: scale(1.2); }
    100% { top: 30%; left: 70%; transform: scale(1.3); }
}

@keyframes moveBlob5 {
    0% { top: 30%; left: 50%; transform: scale(1.2); }
    100% { top: 80%; left: 10%; transform: scale(1.3); }
}

@keyframes moveBlob6 {
    0% { top: 30%; left: 80%; transform: scale(1.1); }
    100% { top: 70%; left: 40%; transform: scale(1.2); }
}

@keyframes moveBlob7 {
    0% { top: 10%; left: 40%; transform: scale(1.3); }
    100% { top: 50%; left: 70%; transform: scale(1.4); }
}

@keyframes moveBlob8 {
    0% { top: 60%; left: 50%; transform: scale(1.2); }
    100% { top: 20%; left: 30%; transform: scale(1.5); }
}

@keyframes moveBlob9 {
    0% { top: 80%; left: 20%; transform: scale(1.1); }
    100% { top: 40%; left: 60%; transform: scale(1.3); }
}


.blob {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.7;
}