:root {
  --goat-cursor-width: 48px;
  /* Percentages of the original artwork: right-facing nose. */
  --goat-hotspot-x: 91.5%;
  --goat-hotspot-y: 40%;
}

.goat-cursor {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: var(--goat-cursor-width);
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  z-index: 2147483647;
  mix-blend-mode: difference;
  transform: translate3d(-200px, -200px, 0);
}

.goat-cursor img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  image-rendering: pixelated;
  /* Turn RGB white while preserving the supplied PNG's alpha silhouette.
     White difference-blending inverts each backdrop color channel. */
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}

@media (hover: hover) and (pointer: fine) {
  html.goat-cursor-active,
  html.goat-cursor-active * {
    cursor: none !important;
  }
  html.goat-cursor-active .goat-cursor {
    display: block;
  }
}