body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    font-family: 'Roboto', sans-serif; /* Fuente moderna */
}

#container {
    text-align: center;
}

#display {
    margin-bottom: 20px;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    font-size: 24px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

#keyboard {
    display: grid;
    grid-template-columns: repeat(13, 60px); /* 13 columnas para acomodar todas las teclas */
    gap: 10px;
    justify-content: center;
}

.key {
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 5px;
    font-size: 20px;
    color: white;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.key:nth-child(1) { background-color: #ff0000; } /* Rojo */
.key:nth-child(2) { background-color: #ff7f00; } /* Naranja */
.key:nth-child(3) { background-color: #ffff00; } /* Amarillo */
.key:nth-child(4) { background-color: #00ff00; } /* Verde */
.key:nth-child(5) { background-color: #0000ff; } /* Azul */
.key:nth-child(6) { background-color: #4b0082; } /* Índigo */
.key:nth-child(7) { background-color: #9400d3; } /* Violeta */
.key:nth-child(8) { background-color: #ff1493; } /* Rosa fuerte */
.key:nth-child(9) { background-color: #00ffff; } /* Cian */
.key:nth-child(10) { background-color: #ff69b4; } /* Rosa claro */
.key:nth-child(11) { background-color: #8a2be2; } /* Azul oscuro */
.key:nth-child(12) { background-color: #ff6347; } /* Tomate */
.key:nth-child(13) { background-color: #20b2aa; } /* Verde mar */
.key:nth-child(14) { background-color: #d2691e; } /* Chocolate */
.key:nth-child(15) { background-color: #8b0000; } /* Rojo oscuro */
.key:nth-child(16) { background-color: #b22222; } /* Rojo ladrillo */
.key:nth-child(17) { background-color: #deb887; } /* Beige */
.key:nth-child(18) { background-color: #5f9ea0; } /* Verde grisáceo */
.key:nth-child(19) { background-color: #dcdcdc; } /* Gris claro */
.key:nth-child(20) { background-color: #f5f5f5; } /* Gris muy claro */
.key:nth-child(21) { background-color: #c71585; } /* Rosa medio */
.key:nth-child(22) { background-color: #800080; } /* Púrpura */
.key:nth-child(23) { background-color: #000080; } /* Azul marino */
.key:nth-child(24) { background-color: #808000; } /* Verde oliva */
.key:nth-child(25) { background-color: #708090; } /* Gris pizarra */
.key:nth-child(26) { background-color: #2f4f4f; } /* Gris oscuro */
.key:nth-child(27) { background-color: rgb(161, 255, 10);   } 
.key:nth-child(28) { background-color: rgb(161, 2, 6);   } 
.key:nth-child(29) { background-color: rgb(11, 4, 10);   }
.key:nth-child(30) { background-color: rgb(161, 100, 10);   }
.key:nth-child(31) { background-color: rgb(11, 25, 100);   }
.key:nth-child(32) { background-color: rgb(161, 255, 10);   }
.key:nth-child(33) { background-color: rgb(161, 255, 10);   } 
.key:nth-child(34) { background-color: rgb(112, 3, 100);   }
.key:nth-child(35) { background-color: rgb(11, 56, 10);   } 
.key:nth-child(36) { background-color: rgb(255, 230, 0);   }