@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  background: #1d1e22;
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: 3.5rem;
  width: 13rem;
  padding: 0 2.5rem 0 1.375rem;
  border: 0;
  border-radius: 1.75rem;
  font-family: Poppins;
  background: #d62959;
  cursor: pointer;
  color: white;
}

.text {
  position: relative;
  height: 3.5rem;
  width: 6rem;
  white-space: nowrap;
  font-size: 1rem;
}

.text::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  content: 'Send Message';
  animation: textAnimation 10s infinite;
}

.uil {
  width: 22px;
  animation: iconAnimation 10s infinite;
}

@keyframes textAnimation {
  0% { transform: translate(0,-50%); }
  9% {
    transform: translate(0,-50%);
    content: 'Send Message';
  }
  10% {
    transform: translate(0,-50%);
    content: 'Sending...';
  }
  30% { transform: translate(0,-50%); }
  39.9% { transform: translate(0,100px); }
  40% {
    transform: translate(300px,100px);
    content: 'Sending...';
  }
  40.1% {
    transform: translate(300px,-60px);
    content: 'Sent';
  }
  40.2% { transform: translate(33px,-60px); }
  45% { transform: translate(33px,-50%); }
  95% {
    transform: translate(33px,-50%);
    content: 'Sent';
  }
  100% {
    transform: translate(0,-50%);
    content: 'Send Message';
  }
}

@keyframes iconAnimation {
  0% { transform: translate(0, 0); }
  10% { transform: translate(0, 0); }
  20% { transform: translate(-170px, 0); }
  30% { transform: translate(-170px, 0); }
  40% {
    transform: translate(200px, 0) scale(2);
  }
  40.1% {
    transform: translate(200px, -60px) scale(1);
  }
  40.2% { transform: translate(34px, -60px); }
  45% { transform: translate(34px, 0); }
  95% { transform: translate(34px, 0); }
  100% { transform: translate(0, 0); }
}

button {
  overflow: hidden;
}