:root {
  color-scheme: light dark;
}

body {
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 0, 255, 0.25);
}

a {
  border-radius: 50%;
}

img {
  border-radius: 50%;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100vh;
  filter: drop-shadow(0 0 1.5rem rgb(255, 0, 255));
}

img:hover {
  animation-name: wiggle;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

@keyframes wiggle {

  /* https://gist.github.com/jetsloth/3e8dee898b978078cbabb4f2300ead86 */

  0%,
  7% {
    transform: rotateZ(0);
  }

  15% {
    transform: rotateZ(-13deg);
  }

  20% {
    transform: rotateZ(9deg);
  }

  25% {
    transform: rotateZ(-10deg);
  }

  30% {
    transform: rotateZ(7deg);
  }

  35% {
    transform: rotateZ(-2deg);
  }

  40%,
  100% {
    transform: rotateZ(0);
  }

}