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

.wrapper {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  background-size: 1800% 1800%;
  animation: rainbow 10s ease infinite;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50vw;
  height: auto;
  transform: translate(-50%, -50%);
  animation: heartbeat 10s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

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

@keyframes heartbeat {
  0%, 100% {
      transform: translate(-50%, -50%) scale(1);
      filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
  }
  20% {
      transform: translate(-50%, -50%) scale(1.1);
      filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.7));
  }
  30% {
      transform: translate(-50%, -50%) scale(1.2);
      filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.9));
  }
  40% {
      transform: translate(-50%, -50%) scale(0.9);
      filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
  }
  60% {
      transform: translate(-50%, -50%) scale(1.1);
      filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.7));
  }
  80% {
      transform: translate(-50%, -50%) scale(1);
      filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
  }
}

@media (min-width: 1000px) {
  img {
      width: 500px;
      height: 500px;
  }
}

@media (max-width: 600px) {
  img {
      width: 80vw;
  }
}