*,body,html{box-sizing:border-box;margin:0;padding:0}body{background:#1d1e26;overflow:hidden;font-family:Roboto,sans-serif;width:100vw;height:100vh}div.container{width:100vw;height:100vh}div.container,div.content{display:flex;flex-direction:column;align-items:center;justify-content:center}div.content{width:100%;max-width:400px;margin:30px;background:#fff;border-radius:5px;padding:20px;background:#282a36;border:2px solid #6272a4;@media (max-width:400px){width:70vw;max-width:70vw;margin-left:auto;margin-bottom:auto;margin-right:auto;margin-top:auto}}h1,strong{color:#f8f8f2}a{color:#50fa7b}button{border-radius:5px;border:0;background:#7159c1;color:#fff;font-weight:700;margin-top:10px;cursor:pointer;margin-bottom:20px}button,input{width:100%;height:40px;font-size:16px}input{border-radius:5px;padding:0 10px;border:none;outline:none;margin-top:2rem}p.credits{font-size:12px;opacity:.5;color:#f8f8f2;text-align:center;font-weight:lighter}div.footer{right:0;width:100%;height:30px;background:#282a36;border-top:1px solid #6272a4;display:flex;align-items:center;justify-content:center}div.char,div.footer{position:fixed;left:0;bottom:0}div.char-container{position:relative;width:300px;height:300px;overflow:hidden;@media (max-width:400px){width:150px;height:150px}}img{@media (max-width:400px){width:150px;height:150px}}div.char-box{position:absolute;bottom:-50px;left:-80px;@media (max-width:400px){bottom:-10px;left:-30px}}