@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Roboto,sans-serif}body,html{height:100%}.maincontent{height:100vh;display:grid;place-items:center;text-align:center}.content{width:360px;max-width:360px;padding:40px 30px;background:#dde1e7;border-radius:10px;-webkit-box-shadow:-3px -3px 7px hsla(0,0%,100%,.45098039215686275),2px 2px 5px rgba(94,104,121,.288);box-shadow:-3px -3px 7px hsla(0,0%,100%,.45098039215686275),2px 2px 5px rgba(94,104,121,.288)}.content .text{font-size:33px;font-weight:600;margin-bottom:35px;color:#595959}.number-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.field-code{height:45px;margin-right:10px}.field-code select{height:100%;padding:10px 0 10px 10px;outline:none;border:none;font-size:18px;background:#faf3f3;color:#595959;border-radius:5px;-webkit-box-shadow:inset 2px 2px 5px #f9efef,inset -5px -5px 10px hsla(0,0%,100%,.45098039215686275);box-shadow:inset 2px 2px 5px #f9efef,inset -5px -5px 10px hsla(0,0%,100%,.45098039215686275)}.field{height:45px;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;margin-top:20px}.field:first-child{margin-top:0}.field input{height:100%;width:100%;padding-left:45px;outline:none;border:none;font-size:18px;background:#faf3f3;color:#595959;border-radius:5px;-webkit-box-shadow:inset 2px 2px 5px #f9efef,inset -5px -5px 10px hsla(0,0%,100%,.45098039215686275);box-shadow:inset 2px 2px 5px #f9efef,inset -5px -5px 10px hsla(0,0%,100%,.45098039215686275)}.field span{position:absolute;color:#595959;width:50px;line-height:45px}#login,#register{margin:15px 0;width:100%;max-width:150px;height:50px;font-size:1.1rem;line-height:50px;font-weight:500;background:#0566f8;border-radius:25px;border:none;outline:none;cursor:pointer;color:#e9eaf0;-webkit-box-shadow:2px 2px 5px #babecc,-5px -5px 10px hsla(0,0%,100%,.45098039215686275);box-shadow:2px 2px 5px #babecc,-5px -5px 10px hsla(0,0%,100%,.45098039215686275)}#login:focus,#register:focus{color:#3498db;-webkit-box-shadow:inset 2px 2px 5px #babecc,inset -5px -5px 10px hsla(0,0%,100%,.45098039215686275);box-shadow:inset 2px 2px 5px #babecc,inset -5px -5px 10px hsla(0,0%,100%,.45098039215686275)}.sign-up{margin:10px 0;color:#696969;font-size:16px}.sign-up a{color:#3498db;text-decoration:none}.sign-up a:hover{text-decoration:underline}.sign-in{margin:10px 0;color:#595959;font-size:16px}.sign-in a{color:#3498db;text-decoration:none}.sign-in a:hover{text-decoration:underline}@-webkit-keyframes zoomIn8{0%{opacity:0;-webkit-transform:scale3d(.8,.8,.8);transform:scale3d(.8,.8,.8)}to{opacity:1}}@keyframes zoomIn8{0%{opacity:0;-webkit-transform:scale3d(.8,.8,.8);transform:scale3d(.8,.8,.8)}to{opacity:1}}.main-content .zoomIn{-webkit-animation-name:zoomIn8;animation-name:zoomIn8}@-webkit-keyframes zoomOut8{0%{opacity:1}to{opacity:0;-webkit-transform:scale3d(.8,.8,.8);transform:scale3d(.8,.8,.8)}}@keyframes zoomOut8{0%{opacity:1}to{opacity:0;-webkit-transform:scale3d(.8,.8,.8);transform:scale3d(.8,.8,.8)}}.smooth-width{-webkit-transition:all 1s;transition:all 1s}.main-content .zoomOut{-webkit-animation-name:zoomOut8;animation-name:zoomOut8}#footer-main{border-top:1px solid #e2e2e2}