@-webkit-keyframes colorsAnimation {
  0% {
    transform: translateY(-20%) translateX(-20%) rotate(0deg) skew(0deg, 0deg);
  }
  16% {
    transform: translateY(0%) translateX(0%) rotate(60deg) skew(15deg, 15deg);
  }
  32% {
    transform: translateY(-20%) translateX(10%) rotate(120deg) skew(0deg, 0deg);
  }
  48% {
    transform: translateY(0%) translateX(20%) rotate(180deg)
      skew(-15deg, -15deg);
  }
  64% {
    transform: translateY(-20%) translateX(10%) rotate(240deg) skew(0deg, 0deg);
  }
  80% {
    transform: translateY(0%) translateX(0%) rotate(300deg) skew(15deg, 15deg);
  }
  100% {
    transform: translateY(-20%) translateX(-20%) rotate(360deg) skew(0deg, 0deg);
  }
}

@keyframes colorsAnimation {
  0% {
    transform: translateY(-20%) translateX(-20%) rotate(0deg) skew(0deg, 0deg);
  }
  16% {
    transform: translateY(0%) translateX(0%) rotate(60deg) skew(15deg, 15deg);
  }
  32% {
    transform: translateY(-20%) translateX(10%) rotate(120deg) skew(0deg, 0deg);
  }
  48% {
    transform: translateY(0%) translateX(20%) rotate(180deg)
      skew(-15deg, -15deg);
  }
  64% {
    transform: translateY(-20%) translateX(10%) rotate(240deg) skew(0deg, 0deg);
  }
  80% {
    transform: translateY(0%) translateX(0%) rotate(300deg) skew(15deg, 15deg);
  }
  100% {
    transform: translateY(-20%) translateX(-20%) rotate(360deg) skew(0deg, 0deg);
  }
}

@-webkit-keyframes marginAnimation {
  0% {
    margin: -100px;
  }
  10% {
    margin: -40px;
  }
  20% {
    margin: 0;
  }
  30% {
    margin: -80px;
  }
  40% {
    margin: 0;
  }
  50% {
    margin: -40px;
  }
  60% {
    margin: 0;
  }
  70% {
    margin: -80px;
  }
  80% {
    margin: 0;
  }
  90% {
    margin: 20px;
  }
  100% {
    margin: -100px;
  }
}

@keyframes marginAnimation {
  0% {
    margin: -100px;
  }
  10% {
    margin: -40px;
  }
  20% {
    margin: 0;
  }
  30% {
    margin: -80px;
  }
  40% {
    margin: 0;
  }
  50% {
    margin: -40px;
  }
  60% {
    margin: 0;
  }
  70% {
    margin: -80px;
  }
  80% {
    margin: 0;
  }
  90% {
    margin: 20px;
  }
  100% {
    margin: -100px;
  }
}

.colorsMove {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
  height: 100%;
}

.colorsMove .colorsMoveContainer {
  -webkit-animation: colorsAnimation infinite 120s;
  animation: colorsAnimation infinite 120s;
  will-change: transform;
}

.colorsMove .blue {
  width: 1000px;
  height: 1000px;
  background-color: var(--light_blue);
  -webkit-filter: blur(70px);
  filter: blur(70px);
  border-radius: 50%;
  -webkit-animation: marginAnimation infinite 60s;
  animation: marginAnimation infinite 60s;
  -webkit-transform: translateZ(0);
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
}

.colorsMove .violet {
  width: 1000px;
  height: 1000px;
  -webkit-filter: blur(70px);
  filter: blur(70px);
  border-radius: 50%;
  -webkit-animation: marginAnimation infinite 60s;
  animation: marginAnimation infinite 60s;
  -webkit-transform: translateZ(0);
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;

  background-color: var(--violet);
}

@media screen and (max-width: 1200px) {
  .colorsMove .blue {
    width: 800px;
    height: 800px;
  }
}

@media screen and (max-width: 850px) {
  .colorsMove .blue {
    width: 600px;
    height: 600px;
  }
}

@media screen and (max-width: 750px) {
  .colorsMove .blue {
    width: 400px;
    height: 400px;
  }
}

@media screen and (max-width: 550px) {
  .colorsMove .blue {
    width: 300px;
    height: 300px;
  }
}