.header-app {
  width: 1236px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -1236px;
}

.header {
  text-align: center;
  padding: 2rem;
  background: linear-gradient(to bottom, #ff9ec8, #fff0f6);
  position: relative;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 158, 200, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.title {
  color: #ff69b4;
  font-size: 3rem;
  text-shadow: 2px 2px #fff;
  animation: bounce 2s infinite;
  padding: 0;
  margin: 0;
}

.desc {
  margin-top: 2rem;
  color: #4f0c22;
}

.footer-heart {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0.6;
  animation: floatHeart 5s linear infinite;
}

@keyframes floatHeart {
  0% {
    transform: translateY(-100%) rotate(0deg);
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(100%) rotate(360deg);
    opacity: 0;
  }
}

.heart {
  position: absolute;
  color: #ff4081;
  animation: fall 3s linear infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes fall {
  from {
    top: -10%;
  }

  to {
    top: 110%;
  }
}