* {
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(#fff0f3, #ffc2d1);
  font-family: 'Trebuchet MS', sans-serif;
  color: #b0405a;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

main {
  height: 100%;
  display: grid;
  place-content: center;
  gap: 12px;
  padding: 20px;
  pointer-events: none; /* so taps go through the text to the page */
}

h1 {
  font-size: 2.2rem;
}

#msg {
  font-size: 1.1rem;
  max-width: 320px;
}

#count {
  opacity: 0.6;
}

/* Each heart created by JS */
.heart {
  position: fixed;
  font-size: 28px;
  animation: rise 2.5s ease-out forwards;
  pointer-events: none;
}

@keyframes rise {
  to {
    transform: translateY(-300px) scale(1.6);
    opacity: 0;
  }
}