:root {
    --taille-cellule: 70px;
    --color-unused: rgb(112, 112, 112);
}

body table {
    font-size: 38px;
}

.char_container {
    padding: 4px;
}

td[data-active='true'] { 
    background-color: rgba(255, 255, 255, 0.1); 
}

td[data-status='2'] { 
    background-color: rgb(83, 141, 78); 
    border-width: 0 1px;
}

td[data-status='1'] { 
    background-color: rgb(181, 159, 59); 
    border-width: 0 1px;
}

#keyboard button[data-used='false'] {
    border-color: var(--color-unused);
    color: var(--color-unused);
}

._cursor_pointer {
    cursor: pointer;
}


#container table td, #example td {
    width: var(--taille-cellule);
    height: var(--taille-cellule);
    align-items: center;
    justify-content: center;
}


@media (max-width: 768px) { 
    :root {
        --taille-cellule: 40px;
    }
    body table {
        font-size: 24px;
    }
    #keyboard button:hover {
        color: #f8f9fa;
        background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity))!important;
        border-color: #f8f9fa;
    }
    .char_container, .containers {
        padding: 2px;
    }
}