body{margin:0;background-color:#d3d3d2;overflow:hidden;}.container{width:100vw;height:100vh;}.container>form{margin-top:10vh;width:300px;margin-left:auto;margin-right:auto;display:grid;grid-template:"logo" "username" "password" "login";}.container>form>.logo{grid-area:logo;}.container>form>.username{grid-area:username;margin-top:15px;}.container>form>.password{grid-area:password;margin-top:5px;}.container>form>.login{grid-area:login;}.transition,form button,form .question label,form .question input[type="text"],form .question input[type="email"],form .question input[type="password"]{-moz-transition:all .25s cubic-bezier(.53,.01,.35,1.5);-o-transition:all .25s cubic-bezier(.53,.01,.35,1.5);-webkit-transition:all .25s cubic-bezier(.53,.01,.35,1.5);transition:all .25s cubic-bezier(.53,.01,.35,1.5);}form button{margin-top:35px;background-color:#fff;border:1px solid #6d0f00;line-height:0;font-size:17px;display:inline-block;box-sizing:border-box;padding:20px 15px;border-radius:60px;color:#6d0f00;font-weight:100;letter-spacing:.01em;position:relative;z-index:1;}form button:hover,form button:focus{color:#fff;background-color:#6d0f00;}form .question{position:relative;padding:10px 0;}form .question:first-of-type{padding-top:0;}form .question:last-of-type{padding-top:0;}form .question label{transform-origin:left center;color:#6d0f00;font-weight:100;letter-spacing:.01em;font-size:17px;box-sizing:border-box;padding:10px 15px;display:block;position:absolute;margin-top:-40px;z-index:2;pointer-events:none;}form .question input[type="text"],form .question input[type="email"],form .question input[type="password"]{appearance:none;background-color:none;border:1px solid #6d0f00;line-height:0;font-size:17px;width:100%;display:block;box-sizing:border-box;padding:10px 15px;border-radius:60px;color:#6d0f00;font-weight:100;letter-spacing:.01em;position:relative;z-index:1;}form .question input[type="text"]:focus,form .question input[type="email"]:focus,form .question input[type="password"]:focus{outline:none;background:#6d0f00;color:#fff;margin-top:30px;}form .question input[type="text"]:valid,form .question input[type="email"]:valid,form .question input[type="password"]:valid{margin-top:30px;}form .question input[type="text"]:focus~label,form .question input[type="email"]:focus~label,form .question input[type="password"]:focus~label{-moz-transform:translate(0,-35px);-ms-transform:translate(0,-35px);-webkit-transform:translate(0,-35px);transform:translate(0,-35px);}form .question input[type="text"]:valid~label,form .question input[type="email"]:valid~label,form .question input[type="password"]:valid~label{text-transform:uppercase;font-style:italic;-moz-transform:translate(5px,-35px) scale(.6);-ms-transform:translate(5px,-35px) scale(.6);-webkit-transform:translate(5px,-35px) scale(.6);transform:translate(5px,-35px) scale(.6);}