*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#FFFFFF;
    color:rgb(F, 0, 0);
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
}

.contenedor{
    text-align:center;
}

h1{
    margin-bottom:25px;
    letter-spacing:5px;
    font-size:40px;
    color:rgb(F, 0, 0);
}

#tablero{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:25px;
}

.fila{
    display:flex;
    justify-content:center;
    gap:8px;
}

.casilla{
    width:60px;
    height:60px;
    border:2px solid #3a3a3c;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:32px;
    font-weight:bold;
    text-transform:uppercase;
    background:#FFFFFF;
}

.correcta{
    background:#6aaa64;
    border-color:#6aaa64;
}

.presente{
    background:#c9b458;
    border-color:#c9b458;
}

.incorrecta{
    background:#3a3a3c;
    border-color:#3a3a3c;
}

.controles{
    color:rgb(0, 0, 0);
}

input{
    width:220px;
    padding:12px;
    font-size:18px;
    text-align:center;
    text-transform:uppercase;
    border:none;
    border-radius:5px;
    outline:none;
    background:#FFFFFF;
    border:2px solid #3a3a3c;
}

button{
    padding:12px 20px;
    margin-left:10px;
    background:#6490aa;
    color:rgb(0, 0, 0);
    border:none;
    border-radius:5px;
    font-size:18px;
    cursor:pointer;
}

button:hover{
    background:#6490aa;
}

#mensaje{
    margin-top:20px;
    font-size:22px;
    font-weight:bold;
}