.field input {
    background: 0;
    border: 0;
    outline: none;
    width: 80vw;
    max-width: 600px;
    font-size: 2em;
    transition: padding 0.3s 0.2s ease;
    text-align: center;
    caret-color: white;
    color: white;
    text-shadow: 0px 0px 10px black;
  }
.field input::placeholder{
    color: white;
    text-align: center;
    text-shadow: 0px 0px 10px black;
  }
  .field input:focus {
    padding-bottom: 5px;
  }
  .field input:focus + .linetwo:after {
    transform: scaleX(1);
  }
  .field {
    position: relative;
    right: 100px;
    width: 550px;
  }
  .field .linetwo {
    width: 110%;
    height: 3px;
    position: absolute;
    bottom: -8px;
    background: white;
  }
  .field .linetwo:after {
    content: " ";
    position: absolute;
    float: right;
    width: 100%;
    height: 3px;
    transform: scalex(0);
    transition: transform 0.3s ease;
    background: black;
  }
  .field input:focus + .line01:after {
    transform: scaleX(1);
  }
  .field .line01 {
    width: 70%;
    height: 3px;
    position: absolute;
    left: 20%;
    bottom: -8px;
    background: white;
  }
  .field .line01:after {
    content: " ";
    position: absolute;
    float: right;
    width: 100%;
    height: 3px;
    transform: scalex(0);
    transition: transform 0.3s ease;
    background: black;
  }