*{margin:0;padding:0;box-sizing:border-box;font-family:Verdana,sans-serif}body{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#555}section{position:inherit;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;gap:2px;flex-wrap:wrap;overflow:hidden}section span{position:relative;display:block;width:calc(6.25vw - 2px);height:calc(6.25vw - 2px);background:#181818;z-index:2;transition:1.5s}section span:hover{background:#ff5900;transition:0s}section .signin{position:absolute;width:580px;background:transparent;z-index:1000;display:flex;justify-content:center;align-items:center}section .signin .description{background-color:#333;color:#aaa;width:280px;padding:35px;text-align:right;border-radius:2px;display:flex;position:relative;flex-direction:column}section .signin .description h1{margin:0;color:#ff5900;text-transform:uppercase}section .signin .description p{margin:0}section .signin .description p{font-size:.9em;color:#aaa;margin-top:10px}section .signin .content{position:relative;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:20px;gap:40px;width:300px;background:#222;border-radius:4px;box-shadow:0 15px 35px #000}section .signin .content h2,section .signin .content h3{font-size:2em;color:#ff5900;text-transform:uppercase}section .signin .content h3{font-size:1.5em}section .signin .content .form{width:100%;display:flex;flex-direction:column;gap:25px}section .signin .content .form .inputBox{position:relative;width:100%}section .signin .content .form .inputBox input{position:relative;width:100%;max-width:100%;background:#333;border:none;outline:none;padding:25px 10px 7.5px;border-radius:4px;color:#fff;font-weight:500;font-size:1em}section .signin .content .form .inputBox button{position:absolute;right:10px;bottom:3px;background:transparent;border:none;cursor:pointer}section .signin .content .form .inputBox i{position:absolute;left:0;padding:15px 10px;font-style:normal;color:#aaa;transition:.5s;pointer-events:none}.signin .content .form .inputBox input:focus~i,.signin .content .form .inputBox input:valid~i{transform:translateY(-7.5px);font-size:.8em;color:#666}.signin .content .form .links{position:relative;width:100%;display:flex;justify-content:space-between}.signin .content .form .links a{color:#fff;text-decoration:none}.signin .content .form .links a:nth-child(2){color:#ff8000;font-weight:600}.signin .content .form .inputBox input[type=submit]{padding:10px;background:#ff5900;color:#000;font-weight:600;font-size:1.35em;letter-spacing:.05em;cursor:pointer}input[type=submit]:active{opacity:.6}@media (max-width: 600px){section{height:unset}section .signin{align-items:unset;display:unset;justify-content:unset;border-radius:unset;box-shadow:unset;position:unset}section .signin .description{background-color:#333;color:#aaa;position:inherit;width:unset;display:flex;text-align:right;flex-direction:column}section .signin .description h1{margin:0;color:#ff8000;text-transform:uppercase}section .signin .description p{margin:0}section .signin .content{width:100%}section:before{content:"";position:absolute;width:100%;height:100%;background:#fff;animation:unset;display:none}section span{display:none}body{background:#333}}button.link{background:none;border:none}.lds-ripple{display:inline-block;position:relative;width:40px;height:40px}.lds-ripple div{position:absolute;border:4px solid #ff0000;opacity:1;border-radius:25%;animation:lds-ripple 1s cubic-bezier(0,.2,.8,1) infinite}.lds-ripple div:nth-child(2){animation-delay:-.5s}@keyframes lds-ripple{0%{top:18px;left:18px;width:0;height:0;opacity:0}4.9%{top:18px;left:18px;width:0;height:0;opacity:0}5%{top:18px;left:18px;width:0;height:0;opacity:1}to{top:0;left:0;width:36px;height:36px;opacity:0}}