body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #ffebe9;
}

.container {
  margin-top: 40vh;
  text-align: center;
}

.center {
  text-align: center;
}

h1 {
  font-family: 'Courgette', cursive;
  color: #fbabad;
  font-size: 40px;
}

h2 {
  color: #ff7e80;
  font-size: 30px;
}

button {
  width: 100px;
  height: 40px;
  border-style: none;
  border-radius: 30vmin;
  margin: 20px;
  font-size: 18px;
}

img {
  border-radius: 7.5vmin;
}

textarea {
  margin-top: 15px;
  resize: none;
  height: 50vh;
  width: 50vw;
  background-color: #e8e8e8;
  border-style: none;
  font-size: 20px;
  font-family: 'Kalam', cursive;
  border-radius: 1.5vmin;
  scrollbar-width: thin;
  white-space: pre-wrap;
}

textarea:focus {
  outline: none;
}

.bold {
  font-weight: bold;
}

.btnGreen {
  background-color: #72e090;
  color: #1a1a1a;
}

.btnRed {
  background-color: #ff6666;
  color: #e6e6e6;
}

.btnBlue {
  background-color: #a8d4ff;
  color: #1a1a1a;
}

.heartbeatBtn:hover {
  animation: heartbeat 0.75s infinite;
}

@keyframes heartbeat {
  0% {
    transform: rotate(-3deg) scale(1.3);
  }
  5% {
    transform: rotate(-3deg) scale(1.4);
  }
  10% {
    transform: rotate(-3deg) scale(1.3);
  }
  15% {
    transform: rotate(-3deg) scale(1.5);
  }
  50% {
    transform: rotate(-3deg) scale(1.3);
  }
  100% {
    transform: rotate(-3deg) scale(1.3);
  }
}