.logincontainer{display:flex;width:100%;justify-content:center;align-items:center;justify-items:center;align-content:center;padding:15% 5% 0}.loginform{position:absolute;top:10%}.form{display:block;padding:2.2rem;width:500px;background:linear-gradient(14deg,rgba(2,0,36,.8),rgba(24,24,65,.7) 66%,#144c63),radial-gradient(circle,rgba(2,0,36,.5) 0,rgba(32,15,53,.2) 65%,rgba(14,29,28,.9) 100%);border:2px solid #fff;-webkit-box-shadow:0 0 50px -15px #00d4ff;box-shadow:0 0 50px -15px #00d4ff;overflow:hidden;z-index:1;border-radius:8px}.form,.input-container{position:relative}.form button,.input-container input{outline:none;border:2px solid #fff;margin:8px 0;font-family:monospace;border-radius:4px}.input-container input{background-color:#fff;padding:6px;font-size:.875rem;line-height:1.25rem;color:#000;width:100%;box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.input-mail:focus::placeholder{opacity:0;transition:opacity .9s;color:#000}.input-pwd:focus::placeholder{opacity:0;transition:opacity .9s}.submit{position:relative;display:block;padding:8px;background:linear-gradient(90deg,#243949,#517fa4);color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,.5);font-size:.875rem;line-height:1.25rem;font-weight:500;width:100%;text-transform:uppercase;overflow:hidden}.submit:hover{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s ease-out;box-shadow:4px 5px 17px -4px #fff;cursor:pointer}.submit:hover:before{-webkit-animation:sh02 .5s linear 0s;-moz-animation:sh02 .5s linear 0s;animation:sh02 .5s linear 0s}.submit:before{content:"";display:block;width:0;height:85%;position:absolute;top:50%;left:0;opacity:0;background:#fff;box-shadow:0 0 50px 30px #fff;-webkit-transform:skewX(-20deg);-moz-transform:skewX(-20deg);-ms-transform:skewX(-20deg);-o-transform:skewX(-20deg);transform:skewX(-20deg)}@keyframes sh02{0%{opacity:0;left:0}50%{opacity:1}to{opacity:0;left:100%}}.signup-link{color:silver;font-size:.875rem;line-height:1.25rem;text-align:center;font-family:monospace}.signup-link a{color:#fff;text-decoration:none}.up:hover{text-decoration:underline}.form-title{font-size:1.25rem;line-height:1.75rem;font-family:monospace;font-weight:600;text-align:center;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,.7);animation-duration:1.5s;overflow:hidden;transition:.12s}.form-title span{animation:flickering 2s linear infinite both}.title-2{display:block;margin-top:-.5rem;font-size:2.1rem;font-weight:800;font-family:Arial,Helvetica,sans-serif;text-align:center;-webkit-text-stroke:#fff .1rem;letter-spacing:.2rem;color:transparent;position:relative;text-shadow:0 0 16px #cecece}.title-2 span:after,.title-2 span:before{content:"—"}@keyframes flickering{0%,to{opacity:1}41.99%{opacity:1}42%{opacity:0}43%{opacity:0}43.01%{opacity:1}47.99%{opacity:1}48%{opacity:0}49%{opacity:0}49.01%{opacity:1}}.bg-stars{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-2;background-size:cover;animation:animateBg 50s linear infinite}@keyframes animateBg{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.star{left:50%;width:4px;height:4px;background:#fff;border-radius:50%;box-shadow:0 0 0 4px hsla(0,0%,100%,.1),0 0 0 8px hsla(0,0%,100%,.1),0 0 20px hsla(0,0%,100%,.1);animation:animate 3s linear infinite}.star,.star:before{position:absolute;top:50%}.star:before{content:"";transform:translateY(-50%);width:300px;height:1px;background:linear-gradient(90deg,#fff,transparent)}@keyframes animate{0%{transform:rotate(315deg) translateX(0);opacity:1}70%{opacity:1}to{transform:rotate(315deg) translateX(-1000px);opacity:0}}.star:first-child{top:0;right:0;left:auto;animation-delay:0s;animation-duration:1s}.star:nth-child(2){top:0;right:100px;left:auto;animation-delay:.2s;animation-duration:3s}.star:nth-child(3){top:0;right:220px;left:auto;animation-delay:2.75s;animation-duration:2.75s}.star:nth-child(4){top:0;right:-220px;left:auto;animation-delay:1.6s;animation-duration:1.6s}