<div>🐝Hello! W3cplus!🦋</div>

@import url(https://fonts.googleapis.com/css?family=Dosis:400,700,800);

:root {
  --bg: conic-gradient(from 270deg at right bottom, #dbe40f, #9613a9, #7d9081, #90300c, #d71abf), url(http://cs.astronomy.com/cfs-file.ashx/__key/telligent-evolution-components-attachments/13-59-00-00-00-48-94-80/orion_5F00_wide_5F00_field.jpg), conic-gradient(from 270deg at left top, #430fe4, #234ae8, #15a32d, #f55519, #d71abf);
  --mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9674/splatter-mask_1.png);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
  font-family: 'Dosis', sans-serif;
  font-size: 10vw;
  font-weight: 900;
  letter-spacing: -3px;
  line-height: 1; 
  color: deepPink;
  
  background-image:var(--bg);
  background-blend-mode: hard-light, screen, overlay;
}

div {
  mask-image: var(--mask);
  animation: hueRotate .28s ease-in-out infinite;
}


@keyframes hueRotate {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}