html,body{margin:0;padding:0;font-family:system-ui,sans-serif}html{height:100%}body{background-color:#1f1e2f;background:linear-gradient(#3e3c5d,#06060a);color:#eee;min-height:100%;display:grid;grid-template-rows:1fr auto}.outer{display:grid;justify-items:center;align-items:center}.container{display:table;text-align:center;margin:0 auto}.inner{text-align:left;height:15em}.inner h1{display:none}.input-container{width:180px;margin:.5em auto 0}.inner input{border:2px solid #eee;background:#00000080;color:#eee;padding:5px;width:178px}.preview{display:flex;text-align:center;flex-direction:column}.preview-top{display:flex;margin-bottom:.3em}.level-outer,.elo-outer{flex:1;display:flex;min-width:-moz-min-content;min-width:-webkit-min-content;min-width:min-content}.level-outer{justify-content:flex-end;margin-right:.5em}.elo-outer{justify-content:flex-start;margin-left:.5em}.level-container,.elo-container{display:flex;align-items:center}.level,.elo{font-family:Seravek,Gill Sans Nova,Ubuntu,Calibri,DejaVu Sans,source-sans-pro,sans-serif;border-width:1px;border-style:solid}.level:empty,.elo:empty{background:none;border-color:transparent}.level{background:#c3c3c3cc;border-color:#aaac;color:#fff;border-radius:50%;width:1.5em;margin-left:1.5em;height:1.5em;line-height:1.5em}.elo{background:#ebb73acc;border-color:#c92c;color:#fff;border-radius:3em;width:3em;height:1.5em;line-height:1.5em}.name-container{display:flex;align-items:center;background-color:#00000080;border-radius:100px;padding-left:6px;min-width:-moz-min-content;min-width:-webkit-min-content;min-width:min-content}.preview .name{padding:7px 12px 7px 6px;white-space:nowrap;overflow:hidden;min-width:1em;max-width:min(18em,calc(100vw - 10em))}.preview .name:empty:before{content:"⍺"}.preview .avatar{height:calc(37vh - 4em);max-height:300px}.result{width:178px;margin:0 auto;line-height:1.8em}.result p{margin:.6em 0 0}.footer{grid-row-start:3;grid-row-end:3;text-align:center}.footer a{color:inherit}