* {
  margin: 0;
  padding: 0;
}

body {
  background: #000000;
}

.wrap {
  display: grid;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.heart_wrap {
  width: 220px;
  height: 220px;
}

.heart {
  animation: heartbeatSlow 1.3s infinite ease-in-out;
  transform-origin: 50% 50%;
  transition: all 0.3s ease-in-out;
  filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.8));
  cursor: pointer;
}

.heart:hover {
  animation: heartbeatFast 0.85s infinite cubic-bezier(0.55, 0.05, 0.4, 0.95);
  filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.8));
}

/* slow heartbeat */
@keyframes heartbeatSlow {
  0% {
    transform: scale(1);
  }

  14% {
    transform: scale(1.13);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.1);
  }

  70% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

/* fast heartbeat */
@keyframes heartbeatFast {
  0% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.12);
    color: red;
  }

  30% {
    transform: scale(1.25);
  }

  45% {
    transform: scale(1.1);
  }

  60% {
    transform: scale(1.22);
  }

  80% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}