.blob-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

.content {
  --_gap: 1.5rem;
  --_color: hsl(60 92% 71% / 1);
  width: 58%;
  max-width: 500px;
  padding: 2.75rem;
  border: 2px solid hsl(60deg 67% 44% / 64%);
  border-radius: 20px;
  color: var(--_color);
}

.blob {
  position: absolute;
  width: 100%;
  max-width: 1000px;
  height: 450px;
  aspect-ratio: 1.5/1;
  animation: ocean-animate 15s ease-in-out infinite alternate;
  filter: blur(30px);
  z-index: 0;
  opacity: 0.2;

  background: linear-gradient(
    47deg,
    rgba(14, 165, 233, 0.7) 10%, /* primary-500 */
    rgba(2, 132, 199, 0.7) 40%, /* primary-600 */
    rgba(99, 102, 241, 0.7) 70%, /* accent-500 */
    rgba(67, 56, 202, 0.7) 90% /* accent-700 */
  );

  box-shadow: inset 30px 30px 30px 0px rgba(79, 70, 229, 0.4), /* accent-600 */
    inset 60px 60px 60px 0px rgba(3, 105, 161, 0.4); /* primary-700 */
}

@keyframes ocean-animate {
  0% {
    translate: -1% -2%;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: scale(1);
  }
  20% {
    translate: 2% 1%;
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  40% {
    translate: -2% 0%;
    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
    transform: scale(0.9);
  }
  60% {
    translate: 1% 2%;
    border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%;
  }
  80% {
    translate: -1% -1%;
    border-radius: 30% 70% 60% 40% / 50% 60% 40% 50%;
    transform: scale(1.05);
  }
  100% {
    translate: 0% -2%;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: scale(1);
  }
}