.kbd-focus-visible {
    /* outline-style: solid;
    outline-width: 2px;
    outline-offset: -2px;
    outline-color: white; */
    /* background: #3ccc51 !important; */
    background: linear-gradient(90deg, #287E47 2.44%, #1DC65A 35.12%, #0A9B3E 66.83%, #1B6E39 100%);
}

.btn {
    border: none;
    outline: none;
    outline-style: none;
}

.kbd-lg {
    min-width: 3.5em;
    min-height: 3.5em;
    font-family: Inter;
    font-size: 20.68px;
    font-weight: 700;
    text-align: center;
    color: white;
    border: none;
    background-color: white;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.btn-focus-visible {
    background: linear-gradient(90deg, #287E47 2.44%, #1DC65A 35.12%, #0A9B3E 66.83%, #1B6E39 100%);
    border: none;
    outline: none;
    outline-style: none;
}

.btn-glass-focus-visible {
    background: #3ccc52ca !important;
}

.btn-glass-focus-visible .card-glass{
    background: white;
}

.btn-glass-focus-visible svg{
    color: #3ccc51 !important;
}

.kbd-shift-uppercase {
    color: var(--fallback-p, oklch(var(--p)));
    outline-style: solid;
    outline-width: 2px;
    outline-offset: -2px;
    outline-color: var(--fallback-p, oklch(var(--p)));
}

.selectable {
    padding: 4rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.selectable > img{
    filter: none
}

.selectable-focus-visible {
    transform: scale(1.05);
    transition: all 2s ease;
}

.selectable-focus-visible > img {
    border: 4px solid #ffff0070;
    filter: drop-shadow(-10px -15px 25px #11ff0060) drop-shadow(15px 21px 13px #ffffff20) drop-shadow(4px -10px 15px #ffff0050);
}