#blurry-shape-1 {
    display: none;
    position: absolute;
    top: 30%;
    left: 70%;
    width: 50%;
    height: 50%;
    background: var(--accent-color);
    opacity: 0.25;
    border-radius: 24% 76% 77% 23% / 30% 30% 70% 70%;
    filter: blur(4rem);
    animation: shape1 10s infinite ease-in-out;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
    transform: translate3d(0,0,0);
    transform: translateZ(0);
}

#blurry-shape-2 {
    display: none;
    position: absolute;
    top: 50%;
    right: 70%;
    width: 30%;
    height: 30%;
    background: #3D348B;
    opacity: 0.25;
    border-radius: 24% 76% 77% 23% / 30% 30% 70% 70%;
    filter: blur(4rem);
    animation: shape1 10s infinite ease-in-out;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
    transform: translate3d(0,0,0);
    transform: translateZ(0);
}

@keyframes shape1 {
    0% {
      border-radius: 24% 76% 77% 23% / 30% 30% 70% 70%;
    }
    25% {
      border-radius: 28% 72% 81% 19% / 78% 25% 75% 22%;
    }
    50% {
      border-radius: 60% 40% 0% 100% / 1% 74% 26% 99%;
    }
    75% {
      border-radius: 0% 100% 100% 0% / 0% 100% 100% 0%;
    }
    100% {
      border-radius: 24% 76% 77% 23% / 30% 30% 70% 70%;
    }
  }

  @media  screen and (max-width: 1024px){
    #blurry-shape-1 {
        display: block;
    }
    #blurry-shape-2 {
        display: block;
    }
  }