html {
  font: 5vmin/1.3 Serif;
  overflow: hidden;
  background: #fbe4ead9;
  z-index: -2;
}

body, head {
  display: block;
  font-size: 2em;
  color: transparent;
}

/* Make sure the document establishes a stacking context so animated
   pseudo-elements can be placed behind content reliably. */
html, body {
  position: relative;
  z-index: 0;
}

head::before, head::after,
body::before, body::after {
  position: fixed;
  top: 20%;
  left: 20%;
  width: 3em;
  height: 3em;
  content: '✨';
  mix-blend-mode:difference;
  /* send the decorative animations behind page content */
  z-index: -1;
  pointer-events: none;
  animation: 44s -27s move infinite ease-in-out alternate;
}


body::before {
  text-shadow:
    1em 1em 2px hsla(301, 91%, 52%, 0.9),
    2em 1.5em 2px hsla(36, 100%, 50%, .9),
    1.5em 2em 2px hsla(72, 100%, 50%, .9),
    2.5em 1em 2px hsla(108, 100%, 50%, .9),
    1em 2.5em 2px hsla(144, 100%, 50%, .9),
    2em 2.5em 2px hsla(180, 100%, 50%, .9),
    2.5em 2.5em 2px hsla(216, 100%, 50%, .9),
    1.5em 1.5em 2px hsla(252, 100%, 50%, .9),
    2.2em 1.8em 2px hsla(288, 100%, 50%, .9),
    1.8em 2.2em 2px hsla(324, 100%, 50%, .9);
  animation-duration: 44s;
  animation-delay: -27s;
}

body::after {
  text-shadow:
    1em 1em 2px hsla(180, 100%, 50%, 0.9),
    2em 1.5em 2px hsla(46, 100%, 50%, .9),
    1.5em 2em 2px hsla(82, 100%, 50%, .9),
    2.5em 1em 2px hsla(118, 100%, 50%, .9),
    1em 2.5em 2px hsla(154, 100%, 50%, .9),
    2em 2.5em 2px hsla(190, 100%, 50%, .9),
    2.5em 2.5em 2px hsla(226, 100%, 50%, .9),
    1.5em 1.5em 2px hsla(262, 100%, 50%, .9),
    2.2em 1.8em 2px hsla(298, 100%, 50%, .9),
    1.8em 2.2em 2px hsla(334, 100%, 50%, .9);
  animation-duration: 43s;
  animation-delay: -32s;
}

head::before {
  text-shadow:
    1em 1em 2px hsla(20, 100%, 50%, .9),
    2em 1.5em 2px hsla(56, 100%, 50%, .9),
    1.5em 2em 2px hsla(92, 100%, 50%, .9),
    2.5em 1em 2px hsla(128, 100%, 50%, .9),
    1em 2.5em 2px hsla(164, 100%, 50%, .9),
    2em 2.5em 2px hsla(200, 100%, 50%, .9),
    2.5em 2.5em 2px hsla(236, 100%, 50%, .9),
    1.5em 1.5em 2px hsla(272, 100%, 50%, .9),
    2.2em 1.8em 2px hsla(308, 100%, 50%, .9),
    1.8em 2.2em 2px hsla(344, 100%, 50%, .9);
  animation-duration: 42s;
  animation-delay: -23s;
}

head::after {
  text-shadow:
    1em 1em 2px hsla(130, 100%, 50%, 0.9),
    2em 1.5em 2px hsla(66, 100%, 50%, .9),
    1.5em 2em 2px hsla(102, 100%, 50%, .9),
    2.5em 1em 2px hsla(138, 100%, 50%, .9),
    1em 2.5em 2px hsla(174, 100%, 50%, .9),
    2em 2.5em 2px hsla(210, 100%, 50%, .9),
    2.5em 2.5em 2px hsla(246, 100%, 50%, .9),
    1.5em 1.5em 2px hsla(282, 100%, 50%, .9),
    2.2em 1.8em 2px hsla(318, 100%, 50%, .9),
    1.8em 2.2em 2px hsla(354, 100%, 50%, .9);
  animation-duration: 41s;
  animation-delay: -19s;
}


@keyframes move {
  from {
    transform: rotate(0deg) scale(12) translateX(-20px);
  }
  to {
    transform: rotate(360deg) scale(18) translateX(20px);
  }
}