/* blobs */

.blobs {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  filter: blur(80px);
}

.blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.35;
}

.blob-1 {
  width: 300px;
  height: 300px;
  background: #6d28d9;
  top: 10%;
  left: 20%;
  animation: float1 12s ease-in-out infinite;
}

.blob-2 {
  width: 250px;
  height: 250px;
  background: #ff00e6;
  top: 50%;
  right: 15%;
  animation: float2 15s ease-in-out infinite;
}

.blob-3 {
  width: 200px;
  height: 200px;
  background: #ff00e6;
  bottom: 20%;
  left: 10%;
  animation: float3 10s ease-in-out infinite;
}

@keyframes float1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(60px, -40px) scale(1.1);
  }
  66% {
    transform: translate(-30px, 50px) scale(0.9);
  }
}

@keyframes float2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-50px, 60px) scale(1.15);
  }
  66% {
    transform: translate(40px, -30px) scale(0.95);
  }
}

@keyframes float3 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(40px, 40px) scale(0.9);
  }
  66% {
    transform: translate(-60px, -20px) scale(1.1);
  }
}