Keyboard CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    background-color: gray;
    padding: 2em;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 0.5em;
}

.row {
    display: flex;
    justify-content: space-evenly;  /* Разпределя бутоните равномерно по целия ред */
    gap: 5px;
    width: 100%;
}

p {
    background-color: #e0e0e0;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    min-width: 40px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    flex-grow: 1; /* Позволява на бутоните да растат и запълват свободното пространство */
}

p:hover {
    background-color: #d0d0d0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.first-row p {
    width: 50px;  /* Бутоните от първия ред ще бъдат по-малки */
}

.second-row p, .third-row p, .fourth-row p, .fifth-row p {
    width: 50px;  /* Бутоните от другите редове ще имат същата ширина */
}

.third-row p:nth-child(1), .fifth-row p:nth-child(1) {
    width: 70px; /* По-широки клавиши като Tab, Caps Lock, Shift */
}

.second-row p:nth-child(14) {
    flex-basis: 110px; /* Задава ширина за backspace */
    width: auto; /* Осигурява адаптивност, ако е необходимо */
}


.sixth-row p {
    width: 60px; /* Ширина на бутоните за контролите (Ctrl, Win, Alt) */
}

p:empty {
    background-color: transparent;
    box-shadow: none;
}

p {
    display: flex;
    justify-content: center;
    align-items: center;
}

p:active {
    transform: translateY(2px);
}

.sixth-row p:nth-child(4) {
    flex-grow: 10;
}

.fourth-row p:nth-child(1) {
    flex-basis: 90px;
    width: au;
}

.fifth-row p:nth-child(13) {
    flex-basis: 130px;
    width: auto;
}

/* Стил за основния бутон Enter */
.third-row p:nth-child(14) {
    padding: 0 3em;

}

.fourth-row {
    margin-right: 4em;
}