body{font-family:"Open Sans",sans-serif;height:100vh;background:url("https://i.imgur.com/HgflTDf.jpg") 100% fixed;background-size:cover;}@keyframes spinner{0%{transform:rotateZ(0deg);}100%{transform:rotateZ(359deg);}}*{box-sizing:border-box;}.wrapper{display:flex;align-items:center;flex-direction:column;justify-content:center;width:100%;min-height:100%;padding:20px;background:rgba(1,12,20,.3);}.login{border-radius:2px 2px 5px 5px;padding:10px 20px 20px 20px;width:90%;max-width:320px;background:#fff;position:relative;padding-bottom:80px;box-shadow:0 1px 5px rgba(0,0,0,.3);}.login.loading button{max-height:100%;padding-top:50px;}.login.loading button .spinner{opacity:1;top:40%;}.login.ok button{background-color:#8bc34a;}.login.ok button .spinner{border-radius:0;border-top-color:transparent;border-right-color:transparent;height:20px;animation:none;transform:rotateZ(-45deg);}.login input{display:block;padding:15px 10px;margin-bottom:10px;width:100%;border:1px solid #ddd;transition:border-width .2s ease;border-radius:2px;color:#ccc;}.login input+i.fa{color:#fff;font-size:1em;position:absolute;margin-top:-47px;opacity:0;left:0;transition:all .1s ease-in;}.login input:focus{outline:none;color:#444;border-color:#2196f3;border-left-width:35px;}.login input:focus+i.fa{opacity:1;left:30px;transition:all .25s ease-out;}.login a{font-size:.8em;color:#2196f3;text-decoration:none;}.login .title{color:#444;font-size:1.2em;font-weight:bold;margin:10px 0 30px 0;border-bottom:1px solid #eee;padding-bottom:20px;}.login button{width:100%;height:100%;padding:10px 10px;background:#2196f3;color:#fff;display:block;border:none;margin-top:20px;position:absolute;left:0;bottom:0;max-height:60px;border:0 solid rgba(0,0,0,.1);border-radius:0 0 2px 2px;transform:rotateZ(0deg);transition:all .1s ease-out;border-bottom-width:7px;}.login button .spinner{display:block;width:40px;height:40px;position:absolute;border:4px solid #fff;border-top-color:rgba(255,255,255,.3);border-radius:100%;left:50%;top:0;opacity:0;margin-left:-20px;margin-top:-20px;animation:spinner .6s infinite linear;transition:top .3s .3s ease,opacity .3s .3s ease,border-radius .3s ease;box-shadow:0 1px 0 rgba(0,0,0,.2);}.login:not(.loading) button:hover{box-shadow:0 1px 3px #2196f3;}.login:not(.loading) button:focus{border-bottom-width:4px;}footer{display:block;padding-top:50px;text-align:center;color:#ddd;font-weight:normal;text-shadow:0 -1px 0 rgba(0,0,0,.2);font-size:.8em;}footer a,footer a:link{color:#fff;text-decoration:none;}