body{background-color:#00c18b}*{font-family:Avenir,Helvetica,Arial,sans-serif}#app{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;margin-top:60px;min-width:300px}.logo{width:25%}.inputs{margin-top:100px}.input{position:relative;margin:25px auto 0;width:20%}input{background-color:transparent;border:none;outline:none;width:100%;height:1.75rem;font-size:1.25rem;padding-top:1.5rem;border-bottom:2px solid #eee;color:#f4f4f4;transition:border-bottom .2s}input:focus,input:valid{border-bottom:2px solid #fff;transition:border-bottom .2s}label{position:absolute;left:0;top:1.5rem;color:#eee;font-size:1.25rem;cursor:text}input:focus+label,input:valid+label,label{transition:top .2s,font-size .2s,color .2s}input:focus+label,input:valid+label{top:0;font-size:1rem;color:#fff}.reset-button{margin-top:3rem}button{width:20%;height:40px;border:none;background-color:#fff;border-radius:3px;font-size:1rem;outline:none;cursor:pointer}button:active{background-color:#eee}.invalid-token-overlay,.reset-success-overlay{position:absolute;top:0;left:0;background-color:rgba(0,0,0,.5);height:100vh;width:100vw}.invalid-token,.reset-success{position:absolute;top:250px;left:calc(50% - 250px);background-color:#fff;width:500px;border-radius:5px;transition:top 1s}.invalid-token-button,.reset-success-button{margin:20px 0;font-weight:400}@media (max-width:1200px){.logo{width:40%}.input,button{width:26%}}@media (max-width:1000px){.logo{width:50%}.input,button{width:33%}}@media (max-width:700px){.input,.logo,button{width:75%}}