* {
    font-family:sans-serif;
}

#root {
    max-width:90vw;
    margin:auto;
}

h1 {
    text-align:center;
}

fieldset {
    margin:2em 0;
    border-color:#aaa;
}

legend {
    font-weight:bold;
    text-align:center;
}

section {
    background-color:#f8f8ff;
    padding-bottom:2em;
    margin:-1ex 0 3em 0;
    padding:1ex;
    display: grid;
    grid-template-areas:
	'title title'
	'text text'
	'textarea output'
	'buttons buttons';
}

h3 {
    text-align:center;
    grid-area:title;
    margin-bottom:1ex;
}

p {
    max-width:30em;
    margin:1em auto;
}

p.warning {
    background-color:#f99;
    padding:1ex;
}

div.text {
    grid-area:text;
    max-width:30em;
    margin:auto;
}

textarea, output {
    padding: 1ex;
    border: 3px ridge #bbb;
    margin:1ex;
    font-family:monospace;
}

output {
    overflow: scroll;
    max-height:30em;
    background-color:#fff;
}

output#singleRecord table {
    border:none;
    border-spacing: 0 1ex;
}

output#singleRecord th {
    text-align:right;
    padding:.5ex;
}

output#singleRecord td {
    background-color:#f4f4f4;
}

div.wide {
    border:1px solid blue;
    width:99%;
}

div.buttons {
    text-align:center;
    grid-area: buttons;

}

button {
    padding:1em;
    margin:0 1em;
    border:3px solid #888;
    border-radius:1em;
    background-color:#fefefe;
}

button:hover {
    border-color:#0f0;
}

th {
    text-align:left;
}

footer {
    text-align:center;
}