html {font-size:62.5%;}
body {background-color:#222;color:#fff;font-family:sans-serif;font-size:1.75rem;line-height:1.5em;margin:10rem auto 30rem;width:80rem;}

h2 {clear:both;margin-top:5rem;}

a {color: #acf;text-decoration:none;}
a:hover {text-decoration:underline;}

table td:last-child, #charmap, input {font-family:monospace;}

table {font-size:1em;}
table td:first-child {color:#aaa;padding-right:1.5rem;text-align:right;}

#tabs {display:flex;margin-bottom:2rem;}
#tabs div {border:2px solid #333;border-bottom-color:transparent;border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;flex:1;line-height:5rem;text-align:center;}
#tabs[tab="1"] div:not(:nth-child(1)), #tabs[tab="2"] div:not(:nth-child(2)), #tabs[tab="3"] div:not(:nth-child(3)) {border-color:transparent;border-bottom-color:#333;color:#555;cursor:pointer;}
#contents > div {display:none;}
#tabs[tab="1"] + #contents > div:nth-child(1), #tabs[tab="2"] + #contents > div:nth-child(2), #tabs[tab="3"] + #contents > div:nth-child(3) {display:block;}

.input {display:flex;margin:1rem 0;}
label {min-width:8rem;padding-right:1.5rem;text-align:right;}
input:not([type="button"]), textarea {appearance:none;background-color:#333;border:none;border-radius:0.5rem;color:#fff;display:block;flex:1;font-size:1.625rem;line-height:3.5rem;padding:0 1rem;}
input[type="button"] {margin-left:10rem;}
input[type="button"] + input[type="button"] {margin-left:1rem;}
textarea {margin:1rem 0;min-height:18rem;resize:vertical;width:100%;}

#charmap {overflow:auto;}
#charmap div {background-color:#333;border-radius:0.5rem;float:left;line-height:2em;margin:0.25em;text-align:center;white-space:pre;width:2em;}
#charmap div:nth-child(16n+1) {clear:left;}