*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1rem;
  background: linear-gradient(
    -45deg,
    #ffd1dc,
    #ffe6c7,
    #fdf5c9,
    #d3f8d3,
    #c7e6ff,
    #e0d1ff,
    #ffd1f4
  );
  background-size: 400% 400%;
  animation: rainbow-shift 18s ease infinite;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.parrot {
  width: min(60vw, 320px);
  height: auto;
  image-rendering: pixelated;
  /* Feather the edges so the image blends into the background */
  -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 100%);
  mask-image: radial-gradient(circle, #000 60%, transparent 100%);
}

@keyframes rainbow-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }
}