*{box-sizing:border-box;border:0;margin:0;padding:0;font-size:100%}html{height:100%}body{color:#e6e6e6;background-color:#0d0d0d;height:100%;font-family:sans-serif;font-size:16px}#wrapper{grid-template:"header header"min-content"input output"/50% 50%;height:100%;display:grid}nav{background-color:#000;grid-area:header;padding:1rem 2rem;font-size:1.4rem}nav h1{margin-right:1rem;display:inline-block}nav a{color:#fff;text-decoration:none}nav #links{display:inline-block}nav #links a{font-size:1rem}nav #links a:hover{text-decoration:underline}nav small{color:#666;font-size:.9rem;font-style:italic}#input{color:#e6e6e6;background-color:#141414;grid-area:input;padding:2rem;font-family:monospace;font-size:.9rem;display:block}#output{white-space:pre;background-color:#0d0d0d;grid-area:output;padding:2rem;font-family:monospace;font-size:.9rem;display:block}