style.css

.input
{
    font-family: 'Fira Code', monospace !important;
}
.title
{
    text-align: center;
}
.container
{
    margin-top: 1em;
    max-width: 92%;
}

.table-length-input 
{
    display: inline-block;
    width: 100%;
    max-width: 10em;
}

.table
{
    font-family: 'Fira Code', monospace !important;
    table-layout: fixed;
    margin-top: 1em;
    font-size: 0.75em;
}

tr > th:first-child {
    text-align: right !important;
}

tr > th:not(:first-child) {
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

td
{
    text-align: center !important;
}

ol[is=hex-input-list]
{
    display: inline-block;
    margin-bottom: 1em;
}

ol[is=hex-input-list] > li
{
    display: inline;
}

ol[is=hex-input-list] .input
{
    display: inline-block;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 2em;
    width: 1em;
    height: 1em;
    caret-color: transparent;
}

ol[is=hex-input-list] .input.is-static
{
    width: 1.5em;
}

ol[is=hex-input-list] .input:not(.is-static):focus
{
    background-color: #00d1b2;
}

.binary-rep
{
    position: absolute;
    font-family: 'Fira Code', monospace !important;
}

.binary-rep > span
{
    display: inline-block;
    text-align: center;
    width: 0.5rem;
    font-size: 0.75em;
}

.footer
{
    background-color: unset;
}