.dnd-section{
  position: relative;
}
.circle{
  position: absolute;
  top: -15%;
  left: -20%;
  display: block;
  width: 494px;
  height: 639px;
  filter: blur(40px);
  z-index: -1;
  aspect-ratio: 1 / 1;
  animation: animateCircle 10s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate forwards;
  background: transparent linear-gradient(0deg, rgba(0, 0, 255, .8) 0%, rgba(255, 0, 167, .8) 100%) 0% 0% no-repeat padding-box;
  opacity: .4;
}
@keyframes animateCircle {
  0% {
    translate: 40% -25%;
    border-radius: 60% 40% 30% 70% / 100% 85% 92% 74%;
  }
  50% {
    translate: 0% 13%;
    border-radius: 20% 71% 47% 70% / 81% 15% 22% 54%;
    rotate: 41deg;
    scale: 1.15;
  }
  100% {
    translate: -45% 39%;
    border-radius: 100% 75% 92% 74% / 60% 80% 30% 70%;
    rotate: -60deg;
    scale: 1.05;
  }
}
.relative{
  position: relative;
}
@media(max-width: 768px){
  .circle{
  width: 194px;
  height: 239px;
}