@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

.divpop {
  display: grid;
  place-items: center;
  background: #202532;
  min-height: 10vh;
  font-family: transducer-extended, sans-serif;
}

h2 {
  --font-size: 2em;
  letter-spacing: 3px;
  margin: 10PX 0 20PX 0;
  color: hsl(0 0% 100%);
  font-size: var(--font-size);
  position: relative;
  display: flex;
  align-items: flex-end;
}

::-moz-selection {
  background: black;
}

::selection {
  background: black;
}

h2 > span:first-of-type {
  display: inline-block;
  line-height: 0.8;
}

h2 > span:last-of-type {
  position: absolute;
  left: 98%;
  bottom: 46%;
  font-size: calc(var(--font-size) * 0.45);
  opacity: 0.75;
}

h2 > span:nth-of-type(2) {
  position: relative;
/*   background: radial-gradient(circle at center, red, blue) 50% 50% / 200cqh 200cqh no-repeat;
  background-clip: text;
  color: transparent; */
/*   animation: pop 1.75s infinite ease-in-out; */
}

.pops {
  position: absolute;
  inset: 0;
  background: #8B49F4;
  mix-blend-mode: darken;
  filter: brightness(1);
  overflow: hidden;
  pointer-events: none;
}

/* h2 span:nth-of-type(2)::before {
  content: "";
  position: absolute;
  width: 200%;
  aspect-ratio: 1;
  left: 0%;
  translate: -50% 0;
  background: radial-gradient(circle at center, hotpink, yellow) 50% 50% / 400% 400% no-repeat;
  mix-blend-mode: color-dodge;
  animation: pop 3.25s infinite ease-in-out;
} */

@-webkit-keyframes pop {
  50% {
    background-size: 100% 100%;
  }
}

@keyframes pop {
  50% {
    background-size: 100% 100%;
  }
}

.pop {
  height: var(--size, 100%);
  aspect-ratio: 1;
  background: radial-gradient(hsl(var(--h) 100% 70%) 25%, transparent 50%);
  position: absolute;
  display: inline-block;
  -webkit-animation: scale var(--s, 2s) var(--d, 0s) infinite alternate;
          animation: scale var(--s, 2s) var(--d, 0s) infinite alternate;
  left: var(--x, 0);
  top: var(--y, 0);
  scale: 0;
  translate: -50% -50%;
  filter: blur(2px);
}
.pop:nth-of-type(1) {
  --x: 10%;
  --y: 25%;
  --h: 260; /* Updated for #8B49F4 */
  --s2: 6;
  --d: -0.25s;
  --s: 6s;
}

.pop:nth-of-type(2) {
  --x: 50%;
  --y: 45%;
  --h: 270; /* Updated for #AA7CF3 */
  --s2: 5;
  --d: -0.75s;
  --s: 5s;
}

.pop:nth-of-type(3) {
  --x: 65%;
  --y: 75%;
  --h: 290; /* Updated for #C98ADE */
  --s2: 3;
  --d: -0.5s;
  --s: 3s;
}

.pop:nth-of-type(4) {
  --x: 85%;
  --y: 15%;
  --h: 285; /* Updated for #F9A1BD */
  --s2: 5;
  --d: -1s;
  --s: 2s;
}

.pop:nth-of-type(5) {
  --x: 15%;
  --y: 100%;
  --h: ; /* Updated for #F9CDC4 */
  --s2: 3;
  --d: -1s;
  --s: 2s;
}
@-webkit-keyframes scale {
  to {
    scale: var(--s2);
  }
}

@keyframes scale {
  to {
    scale: var(--s2);
  }
}