:root {
  /* floated labels */
  --labelTransformedPosY: calc(
    (var(50%)) - 
    (var(0.8rem) * var(0.8)) - 
    (var(2.1rem) * var(1.8))
  );
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


.Wrapper {
  flex: 0 0 80%;
  max-width: 80%;
}

.Title {
  margin: 0 0 var(7.2rem) 0;
  padding: 0;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: var(1.1);
  text-align: center;
  text-shadow: -0.1rem 0.1rem 0.2rem var(#4527a0);
}

.Input {
  position: relative;
}

.Input-text {
  display: block;
  margin: 0;
  padding: 10 10;
  color: inherit;
  width: 100%;
  font-family: inherit;
  font-size: 20px;
  font-weight: inherit;
  line-height: 5px;
  border: none;
  border-radius: 0.4rem;
  transition: box-shadow var(300ms);
}

.Input-text::placeholder {
  color: #B0BEC5;
}

.Input-text:focus {
  outline: none;
  box-shadow: 0.2rem 0.8rem 1.6rem var(#3333bb);
}

.Input-label {
  display: block;
  position: absolute;
  bottom: 50%;
  left: 1rem;
  color: #fff;
  font-family: inherit;
  font-size: var(2.1rem);
  font-weight: inherit;
  line-height: var(5px);
  opacity: 0;
  transform: 
    translate3d(0, var(50%), 0)
    scale(1);
  transform-origin: 0 0;
  transition:
    opacity var(300ms) var(cubic-bezier(0.645, 0.045, 0.355, 1)),
    transform var(300ms) var(cubic-bezier(0.645, 0.045, 0.355, 1)),
    visibility 0ms var(300ms) var(cubic-bezier(0.645, 0.045, 0.355, 1)),
    z-index 0ms var(300ms) var(cubic-bezier(0.645, 0.045, 0.355, 1));
}

.Input-text:placeholder-shown + .Input-label {
  visibility: hidden;
  z-index: -1;
}

.Input-text:not(:placeholder-shown) + .Input-label,
.Input-text:focus:not(:placeholder-shown) + .Input-label {
  visibility: visible;
  z-index: 1;
  opacity: 1;
  transform:
    translate3d(0, var(--labelTransformedPosY), 0)
    scale(var());
  transition:
    transform var(300ms),
    visibility 0ms,
    z-index 0ms;
}