@import url('https://fonts.googleapis.com/css2?family=Arimo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap');

html,body {
    height:99%;
    font-family:Arimo;
}

main {
}

p {
    max-width:30em;
}

fieldset {
    margin:1em;
}

fieldset.highlightTable {
    border:1ex solid  #ff0;
}

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

div.table {
    max-height:20em;
    overflow-y:auto;
}

td,th {
    background-color:#ddd;
}

table.highlight3 th:nth-child(3),
table.highlight3 td:nth-child(3) {
    background-color:#ff8;
}

table.highlight4 th:nth-child(4),
table.highlight4 td:nth-child(4) {
    background-color:#ff8;
}

table.highlight6 th:nth-child(6),
table.highlight6 td:nth-child(6) {
    background-color:#ff8;
}


code {
    display:block;
    white-space:pre-wrap;
    margin:1em auto;
    padding:1ex;
    background-color:#000;
    color:#0d0;
    font-family:'Source Code Pro', monospace;
}

code.old {
    background-color:#eee;
    color:#444;
    border:1px dashed #000;
    margin-top:3em;
}

.center {
    text-align:center;
    margin:1em auto;
}

.flexRow {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}

.flex-column {
    display:flex;
    flex-direction:column;
    align-items:center;
}

::selection {
  background: #ff0; 
}

div.buttons {
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    max-width:44em;
}

div.buttons p {
     border: 3px outset #ccc;
     padding: .5ex 1ex;
     cursor: default;
     width:20em;
     margin:1ex 0;
}

div.buttons p#selected {
    border:  3px inset #88f;
}

div.buttons p:hover {
  background: #ff0; 
}