@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500&display=swap);.form-container{border:1px solid grey;padding:1rem;border-radius:.25rem}.form-nav{display:flex}body{font-family:Open Sans,sans-serif;margin:0}form{margin:2em 0}.logo{width:70%;max-width:300px;display:block}.form,.logo{margin:0 auto}.form{width:80%}.field{display:flex;flex-flow:column-reverse;margin-bottom:1em}input,label{transition:all .2s;touch-action:manipulation}input{font-size:1.5em;border:0;border-bottom:1px solid #ccc;font-family:inherit;-webkit-appearance:none;border-radius:0;padding:0;cursor:text}input:focus{outline:0;border-bottom:1px solid #666}label{text-transform:uppercase;letter-spacing:.05em;color:#626262}input:-moz-placeholder-shown+label{cursor:text;max-width:66.66%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:left bottom;transform:translateY(2.125rem) scale(1.5)}input:-ms-input-placeholder+label{cursor:text;max-width:66.66%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:left bottom;transform:translateY(2.125rem) scale(1.5)}input:placeholder-shown+label{cursor:text;max-width:66.66%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:left bottom;transform:translateY(2.125rem) scale(1.5)}::-webkit-input-placeholder{opacity:0;-webkit-transition:inherit;transition:inherit}input:focus::-webkit-input-placeholder{opacity:1}input:not(:-moz-placeholder-shown)+label{transform:translate(0) scale(1);cursor:pointer}input:not(:-ms-input-placeholder)+label{transform:translate(0) scale(1);cursor:pointer}input:focus+label,input:not(:placeholder-shown)+label{transform:translate(0) scale(1);cursor:pointer}