#symbol-display {
    font-family: serif;
    font-size: 5.5rem;
    text-align: center;
    min-height: 7rem;
}

#symbol-display::before, #symbol-display::after { color: #444 }
#symbol-display::before { content: '[' }
#symbol-display::after { content: ']' }

fieldset {
    display: inline-block;
    border: 1px solid gray;
}

legend {
    color: white;
    background-color: black;
    padding: .2em 1em;
    text-align: left;
}

.tab {
    padding: 1em;
}

table, tr, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

th {
    padding: .2em;
}

td {
    border-left: none;
    border-right: none;
}

.status {
    text-align: center;
    top: 0;
}

.buttons { margin-top: 1em; margin-bottom: 1em; }

button {
    border: none;
    padding: .5em 1em;
    cursor: pointer;
}

#button-mark-learned, .button-correct { background-color: greenyellow; }
#button-mark-to-learn, .button-incorrect { background-color: red; }

.tab-button[data-active="true"] {
    background-color: greenyellow;
}

.tabs {
    overflow-x: auto;
}

.tab[data-shown="false"] {
    display: none;
}