.input-wrapper {
  display: inline-block;
  line-height: 1rem;
  position: relative;
  width: 100%;
  height: 3.1rem;
  margin: 1rem 0;
}
.input-wrapper label {
  background: white;
  color: #f12f21;
  font-size: 16px;
  left: 1.5rem;
  pointer-events: none;
  padding: 0 0.3rem;
  position: absolute;
  top: 35%;
  transform: translateY(-1.6rem);
  transition: transform 100ms ease;
}
.input-wrapper input {
  -webkit-background-clip: text;
  animation: gradientAnimation 2s infinite alternate;
  background-clip: text;
  background-image: linear-gradient(to right, #f12f21, #f03149, #f12f49, #f12cd1);
  background-size: 100%;
  border: 2px solid #f03149;
  border-radius: 5rem;
  color: #f03149;
  font-size: 16px;
  outline: none;
  padding: 1rem 2rem;
  position: relative;
  width: 100%;
  height: 100%;
}
.input-wrapper input::-moz-selection {
  background-color: #f03149;
  color: white;
}
.input-wrapper input::selection {
  background-color: #f03149;
  color: white;
}
.input-wrapper input:invalid + label {
  transform: translateY(0);
}
.input-wrapper input:focus {
  outline: none;
}
.input-wrapper input:focus + label {
  transform: translateY(-1.6rem);
}
.input-wrapper input::placeholder {
  color: #f03149;
  opacity: 1;
}
.input-wrapper input::before {
  content: "";
  background-image: linear-gradient(to right, #f12f21, #f03149, #f12f49, #f12cd1);
  position: absolute;
  width: 100%;
}
.input-wrapper .error-message {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #dc3545;
}
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}