body {
    margin: 0;
    background: #f3f3f3;
    font-family: 'Roboto Mono', monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.keyboard {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    gap: 20px;
    padding: 40px;
    background: #d7d7d7;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    width: 1400px;
}

.main-keys {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.row {
    display: flex;
    gap: 6px;
}

.key {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fdfdfd;
    border-radius: 6px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    height: 55px;
    min-width: 55px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.key:hover {
    background: #e6e6e6;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
}

.key:active {
    background: #ccc;
    transform: translateY(2px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.backspace { width: 120px; }
.tab { width: 120px; }
.caps { width: 120px; }
.enter { width: 115px; }
.shift-left { width: 135px; }
.shift-right { width: 160px; }
.space { width: 380px; }
.ctrl, .win, .alt, .fn, .menu { width: 70px; }
.small { font-size: 12px; padding: 2px; }
.gap { width: 20px; }

.nav-keys {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.nav-keys .rows-block {
    display: flex;
    flex-direction: column;
    margin-bottom: 60px;
}

.arrows {
    margin-top: 52px;
    display: grid;
    grid-template-areas:
      ". up ."
      "left down right";
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.arrow.up { grid-area: up; }
.arrow.left { grid-area: left; }
.arrow.down { grid-area: down; }
.arrow.right { grid-area: right; }

.numpad {
    display: grid;
    grid-template-columns: repeat(4, 55px);
    grid-template-rows: repeat(5, 55px);
    gap: 6px;
    justify-content: center;
    align-items: center;
    margin-top: 63px;
}

.numpad .plus {
    grid-row: span 2;
    height: 116px;
}

.numpad .enter {
    grid-column: 4;
    grid-row: 4 / span 2;
    height: 116px;
    width: 55px;
}

.numpad .zero {
    grid-column: span 2;
}