html,body{font-family:sans-serif;height:99%}footer{margin-top:3em;text-align:center}#intro{grid-area:intro}#history{grid-area:history}#buttons{grid-area:buttons}#root{display:grid;width:99%;padding:1ex;grid-template-areas:"intro intro" "history dataDetails" "textarea output" "buttons buttons";gap:1em}#root>*{padding:1ex;border:3px ridge #bbb}#intro{max-width:5em}#intro[open]{max-width:40em;margin:auto}code{background-color:#000;color:#ff0;display:block;white-space:pre-wrap;margin:1em;padding:1ex}#history,#data{max-height:20em}#history{overflow:scroll;margin-block:0}table{border:1px solid #bbb}th{background-color:#ccc;padding:0 1ex}td{padding:0 1ex}#data{display:flex;flex-wrap:wrap}#data details{margin:1em}output#singleRecord table{border:none;border-spacing:0 1em}output#singleRecord th{text-align:right;padding:.5ex;padding-right:0}output#singleRecord td{background-color:#f4f4f4}#buttons{text-align:center;border:none}button{padding:1em;margin:0 1em;border:3px solid #888;border-radius:1em}button:hover{border-color:#0f0}