*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:monospace;position:relative;background:#000;background-image:radial-gradient(#202020 5%,transparent 50%);background-size:5px 5px;background-attachment:fixed;}
.container{max-width:400px;height:100vh;margin:0 auto;padding:15px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
.welcome{max-width:350px;margin:0 auto;}
.welcome h1{font-size:12px;color:#fff;overflow:hidden;border-right:.15em solid #fbf4a0;white-space:nowrap;letter-spacing:.09em;animation:typing 3.5s steps(40,end),blink-caret .75s step-end infinite;}
@keyframes typing{from{width:0}to{width:100%}}
@keyframes blink-caret{from,to{border-color:transparent}50%{border-color:#fbf4a0}}
.banner{border-radius:10px;width:100%;}
.logo{animation:tada 2s infinite;}
@keyframes tada{0%{transform:scale(1)}10%,20%{transform:scale(0.95) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.05) rotate(3deg)}40%,60%,80%{transform:scale(1.05) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
.btn-register{padding:10px;color:#000;font-size:20px;font-weight:bold;text-decoration:none;text-align:center;background:linear-gradient(to bottom,#fc2dfcda 100%,#000 0%);margin-top:10px;border-radius:10px;position:relative;z-index:2;box-shadow:0 0 10px #f700ff;display:block;}
.btn-login{padding:10px;color:#fff;font-size:20px;font-weight:bold;text-decoration:none;text-align:center;background:linear-gradient(to bottom,#e7e433 100%,#e7e433 0%);margin-top:10px;border-radius:10px;position:relative;z-index:2;box-shadow:0 0 10px #e7e433;display:block;}
.btn-register:hover,.btn-login:hover{transform:scale(1.05);box-shadow:0 0 20px #ff00ff;transition:all .3s ease-in-out;}
.btn-register:active,.btn-login:active{transform:scale(0.95);box-shadow:0 0 5px #ff00ff inset;transition:all .1s ease-in-out;}
@keyframes glow{0%{box-shadow:0 0 5px #ff00ff}50%{box-shadow:0 0 20px #ff01ff}100%{box-shadow:0 0 5px #ff00ff}}
.btn-register,.btn-login{animation:glow 2s infinite alternate;}
.btn-register:active::after,.btn-login:active::after{content:"";position:absolute;width:100%;height:100%;top:0;left:0;background:rgba(255,255,255,0.2);border-radius:10px;transform:scale(0);animation:ripple .4s forwards;}
@keyframes ripple{to{transform:scale(1);opacity:0;}}
.copyright{text-align:center;color:#ffffff96;margin-top:15px;}
.copyright a{color:#e7e433;text-decoration:none;}