// Define your color variables (adjust as needed) :root { –color-dark: #043F2E; –color-light: #C8F169; }/* Container for the headline and animated blobs */ .gooey-container { position: relative; display: inline-block; filter: url(‘#goo’); padding: 2rem; overflow: hidden; }/* Blobs container positioned behind the text */ .gooey-container .blobs { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }.gooey-container .blobs .blob { position: absolute; background: var(–color-light); border-radius: 50%; width: 100px; height: 100px; animation: blobMove 5s infinite ease-in-out; }/* Individual blob positions and delays */ .gooey-container .blobs .blob-1 { top: -20px; left: -20px; animation-delay: 0s; }.gooey-container .blobs .blob-2 { top: 40%; right: -30px; animation-delay: 1s; }.gooey-container .blobs .blob-3 { bottom: -30px; left: 30%; animation-delay: 2s; }/* Headline styles */ .gooey-container .title { position: relative; font-size: max(35px, 6.666vw); color: var(–color-dark); text-align: center; margin: 0; line-height: 1.15; text-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }/* Blob movement animation */ @keyframes blobMove { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(20px, 30px) scale(1.1); } 66% { transform: translate(-20px, -30px) scale(0.9); } 100% { transform: translate(0, 0) scale(1); } }