.flowFree table {
    border-collapse: collapse;
    font-size: calc(3 * var(--font-size-default));
}

.flowFree td:hover {
    background-color: var(--highlight-color-highlighted);
}

.flowFree td {
    padding: 0;
    position: relative;
    width: 1ch;
    height: calc(3 * var(--line-height-default));
    overflow: hidden;
}

.flowFree .cb0 {
    background-color: black;
}

.flowFree .cb1 {
    background-color: var(--background-color-checker);
}

.flowFree div.emoji {
    font-size: calc(5 * var(--font-size-emoji)); /* Noto displays these really small so 3x doesnt work */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.flowFree div.not-emoji {
    font-size: calc(4 * var(--font-size-default)); /* 4 instead of 3 to remove gaps */
    position: absolute;
    top: 12%; /* noto sans mono displays line characters offset up a bit so this puts them back down */
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .flowFree .c0 { color: #e6194B; }
.flowFree .c1 { color: #bfef45; }
.flowFree .c2 { color: #4363d8; }
.flowFree .c3 { color: #f58231; }
.flowFree .c4 { color: #3cb44b; }
.flowFree .c5 { color: #911eb4; }
.flowFree .c6 { color: #42d4f4; }
.flowFree .c7 { color: #f032e6; } */
.flowFree .c0 {color: #ff0040}
.flowFree .c1 {color: #00ff22}
.flowFree .c2 {color: #ffdd00}
.flowFree .c3 {color: #436cff}
.flowFree .c4 {color: #ff8731}
.flowFree .c5 {color: #983eff}
.flowFree .c6 {color: #44ddff}
.flowFree .c7 {color: #ff36cd}
.flowFree .c8 {color: #cbff49}