.can {
  background: #1D9ADF;
}
.can h1 {
  position: absolute;
  width: 100%;
  top: 48vh;
  color: #13e574;
  letter-spacing: .7em;
  opacity: 1;
}
.can h2 {
  color: #939598;
  font-family: "Inter", Sans-serif;
  font-size: 100px;
  font-weight: 800;
  padding-top: 220px;
  margin-bottom: -310px;
  letter-spacing: -3px;
  position: relative;
  mix-blend-mode: difference;
  z-index: 2;
  line-height: 105px;
}
.div1,
.div2,
.div3 {
  position: absolute;
  width: .001vmin;
  height: .001vmin;
  border-radius: 50%;
  opacity: 0.5;
}
.div1 {
  box-shadow: 0 0 45vmax 45vmax #1d9adf;
  animation: hue 10s 0s linear infinite, move1 19s 0s linear infinite;
}
.div2 {
  box-shadow: 0 0 45vmax 45vmax #ff3900;
  animation: hue 15s 0s linear infinite, move2 25s 0s linear infinite;
}
.div3 {
  box-shadow: 0 0 45vmax 45vmax #ffba00;
  animation: hue 20s 0s linear infinite, move3 15s 0s linear infinite;
  opacity: .5;
}
@keyframes hue {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
@keyframes move1 {
  0% {
    top: 0vh;
    left: 50vw;
  }
  25% {
    left: 0vw;
  }
  50% {
    top: 100vh;
  }
  75% {
    left: 100vw;
  }
  100% {
    top: 0vh;
    left: 50vw;
  }
}
@keyframes move2 {
  0% {
    top: 50vh;
    left: 100vw;
  }
  25% {
    top: 100vh;
  }
  50% {
    left: 0vw;
  }
  75% {
    top: 0vh;
  }
  100% {
    top: 50vh;
    left: 100vw;
  }
}
@keyframes move3 {
  0% {
    top: 100vh;
    left: 50vw;
  }
  25% {
    left: 100vw;
  }
  50% {
    top: 0vh;
  }
  75% {
    left: 0vw;
  }
  100% {
    top: 100vh;
    left: 50vw;
  }
}