#keyboard_container {
    font-size: 0.75rem;
    display: flex;
    width: max-content;
    gap: 4ch;
    align-items: end;
}

.key_group {
    display: flex;
    flex-direction: column;
}

.keys {
    display: flex;
    gap: 0.5ch;
    margin-bottom: 0.125rem;
}

.key {
    line-height: 0.85rem;
    display: inline;
    border: 0.0625rem solid var(--text);
    border-bottom: 0.125rem solid var(--text);
    padding: 0 calc(0.5ch - 0.0625rem);
    user-select: none;
}

.key:hover {
    cursor: pointer;
}

.key[data-noclick="true"]:hover {
    cursor: not-allowed;
}

.key.active_key,
.key:active {
    background: var(--text);
    color: var(--bg);
    line-height: 0.75rem;
    margin-top: 0.1rem;
}

#tutorial li {
    margin-top: 0.3rem;
}

.span_key {
    display: inline;
    border: 0.0625rem solid var(--text);
    border-bottom: 0.125rem solid var(--text);
    padding: 0 calc(0.5ch - 0.0625rem);
}

*:focus .span_key {
    border: 0.0625rem solid var(--bg);
    border-bottom: 0.125rem solid var(--bg);
}
