@import url(https://fonts.googleapis.com/css?family=Nunito);body{font-family:Nunito,sans-serif;background:linear-gradient(90deg,#2739a1,#20bdff);margin:0;height:100vh;display:grid}.wrapper{height:100%;width:100%;justify-content:center}.wrapper,.wrapper .content{display:flex;align-items:center}.wrapper .content{background-color:#48a6fd;border-radius:10px;flex-direction:row}.wrapper .content .Login-aside{display:flex;align-items:center;justify-content:center}.wrapper .content .Login-aside aside img{height:100%;width:100%;max-width:500px;min-width:300px}.wrapper .content .Login-box,.wrapper .content .Register-box{background:#fff;padding:0 15px;border-radius:10px;width:100%;max-width:300px;min-width:200px}.wrapper .content .Login-box button,.wrapper .content .Register-box button{padding:15px;width:150px;border:1px solid #eee;background:transparent;border-radius:50px;color:#333;cursor:pointer}.wrapper .content .Login-box button:focus,.wrapper .content .Register-box button:focus{outline:none}.wrapper .content .Login-box header,.wrapper .content .Register-box header{padding-top:20px;text-align:center}.wrapper .content .Login-box header h1,.wrapper .content .Register-box header h1{font-size:230%}.wrapper .content .Login-box section .social-login,.wrapper .content .Register-box section .social-login{padding:10px;text-align:center;margin-bottom:20px;display:flex;justify-content:center}.wrapper .content .Login-box section .social-login button,.wrapper .content .Register-box section .social-login button{display:flex;align-items:center;justify-content:center;transition:background .5s;-webkit-transition:background .5s}.wrapper .content .Login-box section .social-login button:first-child,.wrapper .content .Register-box section .social-login button:first-child{margin-right:10px}.wrapper .content .Login-box section .social-login button:hover,.wrapper .content .Register-box section .social-login button:hover{background-color:#eee}.wrapper .content .Login-box section .social-login button span,.wrapper .content .Register-box section .social-login button span{font-size:17px;color:#777;margin-left:5px}.wrapper .content .Login-box section .login-form,.wrapper .content .Login-box section .register-form,.wrapper .content .Register-box section .login-form,.wrapper .content .Register-box section .register-form{padding:0 20px;display:flex;flex-direction:column;align-items:center}.wrapper .content .Login-box section .login-form .input-group,.wrapper .content .Login-box section .register-form .input-group,.wrapper .content .Register-box section .login-form .input-group,.wrapper .content .Register-box section .register-form .input-group{display:flex;flex-direction:column;margin-top:10px;width:100%;max-width:310px}.wrapper .content .Login-box section .login-form .input-group label,.wrapper .content .Login-box section .register-form .input-group label,.wrapper .content .Register-box section .login-form .input-group label,.wrapper .content .Register-box section .register-form .input-group label{color:#999;font-size:12px;margin-bottom:3px;margin-left:16px}.wrapper .content .Login-box section .login-form .input-group input,.wrapper .content .Login-box section .register-form .input-group input,.wrapper .content .Register-box section .login-form .input-group input,.wrapper .content .Register-box section .register-form .input-group input{padding:15px;font-size:13px;border:1px solid #e4eff8;background-color:#e4eff8;border-radius:50px;transition:border .5s;-webkit-tranistion:border .5s}.wrapper .content .Login-box section .login-form .input-group input:focus,.wrapper .content .Login-box section .register-form .input-group input:focus,.wrapper .content .Register-box section .login-form .input-group input:focus,.wrapper .content .Register-box section .register-form .input-group input:focus{outline:0;border-color:#20bdff}.wrapper .content .Login-box section .login-form .input-group button,.wrapper .content .Login-box section .register-form .input-group button,.wrapper .content .Register-box section .login-form .input-group button,.wrapper .content .Register-box section .register-form .input-group button{background-color:#2739a1;border:unset;color:#fff;align-self:center;margin-top:15px;transition:background .5s;-webkit-transition:background .5s}.wrapper .content .Login-box section .login-form .input-group button:hover,.wrapper .content .Login-box section .register-form .input-group button:hover,.wrapper .content .Register-box section .login-form .input-group button:hover,.wrapper .content .Register-box section .register-form .input-group button:hover{background-color:#2739a1}.wrapper .content .Login-box footer,.wrapper .content .Register-box footer{display:flex;justify-content:center;padding-top:15px;padding-bottom:10px;text-align:center;font-size:13px}.wrapper .content .Login-box footer a,.wrapper .content .Register-box footer a{color:#2739a1;text-decoration:none;font-size:15px}.wrapper .content .Login-box footer .footerText,.wrapper .content .Register-box footer .footerText{margin-right:5px}.wrapper .content a{color:#999;text-decoration:none;font-size:11px}@media screen and (max-width:720px){.wrapper .content{flex-direction:column;padding-right:0;padding-left:0;margin:0 10px}.wrapper .content .Login-aside aside img{max-width:300px}.wrapper .content .Login-box,.wrapper .content .Register-box{width:90%}.wrapper .content .Login-box header,.wrapper .content .Register-box header{padding-top:0}.wrapper .content .Login-box header h1,.wrapper .content .Register-box header h1{margin-top:10px;margin-bottom:10px}}@media screen and (max-width:350px){body{background:#48a6fd}}