:root{--odd-bg:#444;--even-bg:#555;--number-color:#6ba1ff;--symbol-color:#e15f86;--char-width:30vw}*{margin:0;padding:0}body,html{background-color:#222;color:#fff;height:100%;overflow:hidden}h1,h2{font-size:200%}p{line-height:1.32;margin:10px 0}a{text-decoration:none}input{background-color:#444;border:1px solid #ccc;border-radius:3px;box-shadow:inset 0 1px 2px rgba(0,0,0,.075);color:#ccc;font-family:sans-serif;font-size:12px;min-height:26px;outline:none;padding:2px;text-align:center;width:100%}input:focus{box-shadow:inset 0 1px 2px rgba(0,0,0,.075),0 0 5px rgba(81,167,232,.5);outline:none}input::-webkit-input-placeholder{color:#ccc}.main{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.inputarea{left:0;margin-left:35%;margin-right:35%;margin-top:10px;position:absolute;top:0;width:30%}@media only screen and (max-width:700px){.inputarea{margin-left:10%;margin-right:10%;width:80%}}.inputarea a{color:#ccc;margin:5px;padding:2px}.inputarea a:hover{color:#fff;text-decoration:underline}input:not(:focus)::selection{text-shadow:none}.inputarea:not(:focus){-webkit-user-select:none;user-select:none}.text{border:1px solid #eee;border-radius:10px;box-shadow:10px 10px 50px 5px #444;font-family:monospace;font-size:var(--char-width);overflow:hidden}.text>*{float:left}.text .number{color:var(--number-color)}.text .symbol{color:var(--symbol-color)}.text:nth-child(odd){background:var(--odd-bg)}.text:nth-child(2n){background:var(--even-bg)}