.wrapper {
    max-width: 90%;
    /* margin: 100px auto; */
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: 5%;
    
  }
  label {
    position: relative;
    display: block;
    /* width: 80%; */
    margin-left: 2.5%;
    margin-right: 2.5%;
    /* width: calc(40vh - (16px * 5) - (var(--border) * 3px)); */
  }
  label > input {
    position: relative;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    outline: none;
    height: 45px;
    width: 20%;
    font-size: 1.2em;
    margin: 0 0 30px 0;
    padding: 0;
    box-shadow: none;
    box-sizing: content-box;
    transition: all .3s;
  }
  label > input:valid + span {
    transform: translateY(-5px) scale(1.0);
    transform-origin: 0;
  }
  label > input:valid {
    border-bottom: 1px solid #3F51B5;
    /* box-shadow: 0 1px 0 0 #3F51B5; */
  }
  label > span {
    color: #9e9e9e;
    position: absolute;
    top: -30px;
    left: 0;
    font-size: 1.2em;
    cursor: text;
    transition: .2s ease-out;
  }
  label > input:focus + span {
    transform: translateY(-5px) scale(1.2);
    transform-origin: 0;
    color: #3F51B5;
  }
  label > input:focus {
    border-bottom: 1px solid #3F51B5;
    box-shadow: 0 1px 0 0 #3F51B5;
  }