#maze table {
    border-collapse: collapse;
    font-size: var(--font-size-default);
}

#maze td {
    padding: 0;
    position: relative;

    width: 2ch;
    height: calc(2 * var(--line-height-default));
    overflow: hidden;
}

#maze div {
    font-size: calc(2.7 * var(--font-size-default));
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#maze div.outside {
    color: rgb(255, 255, 255)
}

#maze div.wall {
    color: rgb(255, 255, 255)
}

#maze div.inside-visible {
    color: rgb(0, 0, 0)
}

#maze div.inside-invisible {
    /* font-size: var(--font-size-default); */
    color: rgb(255, 255, 255)
}

#maze div.connection {
    /* font-size: var(--font-size-default); */
    color: rgb(255, 255, 255)
}

#maze div.computer {
    background-color: rgb(62, 255, 62);
    font-size: calc(3 * var(--font-size-emoji))
}

#maze div.computer-disabled {
    background-color: rgb(255, 30, 30);
    font-size: calc(3 * var(--font-size-emoji))
}

#maze div.emoji {
    font-size: calc(3 * var(--font-size-emoji))
}

span.mazeArrow{
    color: var(--win-color);
    /* font-size: calc(4 * var(--font-size-emoji)) */
}

#maze-fit-content {
    display: inline-block;
    width: fit-content;
}

#maze-left-right-holder {
    display: flex;
}

#maze-left {
    width: fit-content;
}

#maze-right {
    flex-grow: 1;
    min-width: 22ch;
}