/********************** LEVEL BOARDS *****************************/
.level-board {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.level-board .title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.level-board .title img {
    height: 1.7em;
    margin-right: 5px;
}

.level-board .illustration {
    max-width: 100%;
    margin-bottom: 25px;
}

/********************** LEVEL BAR *****************************/
#level-bar {
    display: flex;
    justify-content: center;
    margin: 0 20px;
}

#level-bar .bar-box {
    height: 20px;
    flex: 0 1 70px;
}

#level-bar .bar-box + .bar-box {
    border-left: 1px solid var(--gray);
}

#level-bar .bar-box:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
#level-bar .bar-box:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

#level-bar .bar-box.unfinished {
    background-color: white;
}
#level-bar .bar-box.current {
    background-color: var(--yellow);
}
#level-bar .bar-box.solved {
    background-color: var(--greenHover);
}

.white-screen #level-bar .bar-box.unfinished {
    background-color: var(--lightGray);
}