.background-tiedye
{
  position: relative;
  /*background: #E7D0FE;*/
  overflow: hidden;
}

.shape1 {
  position: absolute;
  top: 0%;
  left: -5%;
  width: 25rem;
  height: 35rem;
  background: #ba9eff;
  border-radius: 24% 76% 77% 23% / 30% 30% 70% 70%;
  filter: blur(4.5rem);

		mix-blend-mode: color;

  animation: shape1 20s infinite;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
   -webkit-transform: translateZ(0) scale(1.0, 1.0);
    transform: translateZ(0, 0, 2%);
}

/* ///// MOBILE ///// */


@media only screen and (max-width: 575px) {

	.shape1 
	{
		top: 40%;
		left: -60%;
		mix-blend-mode: color;

	}
  
}

@keyframes shape1 {
  0% {
    transform: translate(0, 0, 2%);
    border-radius: 24% 76% 77% 23% / 30% 30% 70% 70%;
  }
  25% {
    transform: translate(-10%, -10%, 2%);
    border-radius: 28% 72% 81% 19% / 78% 25% 75% 22%;
    height: 30rem;
    width: 40rem;
  }
  50% {
    transform: translate(-10%, -50%, 2%);
    border-radius: 60% 40% 0% 100% / 1% 74% 26% 99%;
  }
  75% {
    transform: translate(-20%, -30%, 2%);
    border-radius: 0% 100% 100% 0% / 0% 100% 100% 0%;
    height: 30rem;
    width: 50rem;
  }
  100% {
    transform: translate(0%, 0%, 2%);
    border-radius: 24% 76% 77% 23% / 30% 30% 70% 70%;
  }
}

.shape2 {
  position: absolute;
  top: 55%;
  left: 80%;
  width: 35rem;
  height: 25rem;
  background: #DFF4FB;
  border-radius: 73% 27% 77% 23% / 53% 4% 96% 47%;
  filter: blur(4.5rem);
  
  mix-blend-mode: color;


  animation: shape2 25s infinite;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
   -webkit-transform: translateZ(0) scale(1.0, 1.0);
    transform: translateZ(0);
  
}

@keyframes shape2 {
  0% {
    transform: translate(0, 0);
    border-radius: 73% 27% 77% 23% / 53% 4% 96% 47%;
  }
  25% {
    transform: translate(20%, -55%);
    border-radius: 28% 72% 81% 19% / 78% 25% 75% 22%;
    height: 50rem;
    width: 50rem;
  }
  50% {
    transform: translate(-70%, -70%);
    border-radius: 60% 40% 0% 100% / 1% 74% 26% 99%;
  }
  75% {
    transform: translate(-30%, -30%);
    border-radius: 0% 100% 100% 0% / 0% 100% 100% 0%;
  }
  100% {
    transform: translate(0%, 0%);
    border-radius: 73% 27% 77% 23% / 53% 4% 96% 47%;
  }
}

/*light*/
.shape3 {
  position: absolute;
  top: -20%;
  left: 85%;
  width: 25rem;
  height: 35rem;
  background: rgba(224, 230, 159, .5);
  border-radius: 70% 30% 80% 20% / 42% 25% 75% 58%;
  filter: blur(3.5rem);
  
  mix-blend-mode: color;


  animation: shape3 20s infinite;
  -webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;

}

@keyframes shape3 {
  0% {
    transform: translate(0, 0);
    border-radius: 70% 30% 80% 20% / 42% 25% 75% 58%;
  }
  25% {
    transform: translate(-125%, -25%);
    border-radius: 28% 72% 81% 19% / 78% 25% 75% 22%;
    height: 50rem;
    width: 50rem;
  }
  50% {
    transform: translate(-90%, -35%);
    border-radius: 60% 40% 0% 100% / 1% 74% 26% 99%;
  }
  75% {
    transform: translate(-30%, -40%);
    border-radius: 0% 100% 100% 0% / 0% 100% 100% 0%;
  }
  100% {
    transform: translate(0%, 0%);
    border-radius: 70% 30% 80% 20% / 42% 25% 75% 58%;
  }
}

.shape4 {
  position: absolute;
  top: 70%;
  left: 60%;
  width: 25rem;
  height: 25rem;
  background: rgba(109, 188, 227, .4);
  border-radius: 24% 76% 77% 23% / 30% 30% 70% 70%;
  filter: blur(3.5rem);
  
  mix-blend-mode: color;


  // animation: shape1 15s infinite;
  -webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;

}

/*light*/

.shape5 {
  position: absolute;
  top: 43%;
  left: 30%;
  width: 45rem;
  height: 25rem;
  background: rgba(245, 189, 222, .5);
  border-radius: 73% 27% 77% 23% / 53% 4% 96% 47%;
  filter: blur(3.5rem);
  
  mix-blend-mode: color;


  // animation: shape2 13s infinite;
  -webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;

}

/*light*/

.shape6 {
  position: absolute;
  top: 50%;
  left: 10%;
  width: 25rem;
  height: 25rem;
  background: rgba(224, 230, 159, .5);
  border-radius: 70% 30% 80% 20% / 42% 25% 75% 58%;
  filter: blur(3.5rem);
  
  mix-blend-mode: color;


  // animation: shape3 28s infinite;
  -webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;

}