*{margin:0;padding:0;}
html {
  height: 100%;
}

html {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  background-image: linear-gradient(#c7fffe, #3cb3be, #000094 70%, #00001a 100%, #000);
  display: flex;
  justify-content: center;
  align-items: center;
  mix-blend-mode: source-over;
  filter: invert(1) brightness(1.2) contrast(1.8) hue-rotate(18deg);
}

#cnv {
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
  width: 100%;
  color: yellow;
  z-index: 2;
  -webkit-animation: move 36s infinite cubic-bezier(1, 2.33, 1, -22.22) alternate;
          animation: move 36s infinite cubic-bezier(1, 2.33, 1, -22.22) alternate;
}

@-webkit-keyframes move {
  to {
    filter: hue-rotate(360deg);
    mix-blend-mode: xor;
  }
}

@keyframes move {
  to {
    filter: hue-rotate(360deg);
    mix-blend-mode: xor;
  }
}