:root {
    --page-color: #d9f3d2;
    --text-color: black;
    --greyed-text: grey;
    --highlight-color: #a8cfa9;
    --table-th-color: var(--highlight-color);
    --table-td-color: whitesmoke;
    --char-detail-color: var(--table-td-color);
}
html {
    background-color: var(--page-color);
    color: var(--text-color);
}
a {
    color: var(--text-color);
    font-weight: bold;
}
a:hover{ text-decoration: none; }
fieldset p { margin: 0; }
select {
    max-width: 25em;
}

#char-table {
    margin: 0;
    border-collapse: collapse;
    border: 1px solid currentcolor;
}
#char-table caption {
    font-style: italic;
    margin: 1em 0;
}
#char-table td, #char-table th {
    border: 1px solid currentcolor;
    padding: 0.1em;
    text-align: center;
    /* font-size: 3vw; */
    /* 3vw -> 3% of the viewport width, attempt at making text larger
       without forcing horizontal scroll on mobile */
    font-size: min(3vw, 25px);
}
#char-table td {
    background-color: var(--table-td-color);
}
#char-table td.char-diff {
    background-color: var(--highlight-color);
}
p .char-diff {
    background-color: var(--highlight-color);
}
#char-table th {
    font-family: monospace;
    font-weight: bold;
    background-color: var(--table-th-color);
}
.char-cell:hover {
    box-shadow: 0 -3px currentcolor inset;
}
.clicked, .clicked:hover {
    box-shadow: 0 0 0 3px currentcolor inset;
}
.short-name, .name-only {
    border: 0 dashed currentcolor;
    border-bottom-width: 1px;
}
.no-name {
    border: 1px dashed var(--greyed-text);
    color: var(--greyed-text);
}

.glyph-examples {
    text-align: center;
    border-spacing: 1rem;
}
.glyph-examples .glyph {
    padding: 0 1rem;
    border: 1px solid currentcolor;
    font-size: 3em;
    background-color: var(--char-detail-color);
}

.popover {
    inset: unset;
    position: fixed;
    right: 5px;
    bottom: 5px;
}

hr {
    /* from  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr#try_it */
    margin: 5rem 3rem;
    border: none;
    border-top: 3px double currentColor;
    color: currentColor;
    overflow: visible;
    text-align: center;
    height: 5px;
}

hr::after {
    background: var(--page-color);
    content: '❁';
    padding: 0 3rem;
    font-size: 50px;
    position: relative;
    top: -30px;
}