body{
    font-family: Arial, sans-serif;
}
h1{
    text-align: center;
}
.try{
    display: flex;
    justify-content: center;
    margin: auto;
}
.grid .letter{
    width: 50px;
    height: 50px;
    margin: 3px;
    font-size: 30px;
    font-weight: bold;
    border: 2px solid #ddd;
    text-align: center;
    line-height: 52px;
}
.grid .letter.good{
    background: green;
    border-color: green;
    color: white;
}
.grid .letter.position{
    background: #d5b427;
    border-color: #d5b427;
    color: white;
}
.keyboard{ margin-top: 80px; }
.keyboard .row{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.keyboard .key{
    width: 43px;
    height: 58px;
    line-height: 60px;
    margin: 4px 3px;
    background: #ddd;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
}
.keyboard .key.function{
    width: auto;
    padding: 0 10px;
}

.container{
  margin:auto;
  max-width: 500px;
}

#array th, td{
  padding:10px;
}

.bck_grey{
  background-color:grey;
  color:white;
}

.win{
  background-color: #77BE9C;
}

.defeat{
  background-color: #D44571;
}

#start{
  margin-bottom:20px;
  background-color: #C1A98B;
  border: none;
  padding:10px 20px;
  border-radius:5px;
  color:white;
  font-weight: 700;
  font-size: 18px;
}

#start:hover{
  cursor:pointer;
}

#message{
  font-weight: 700;
  font-size: 18px;
  padding: 10px 20px;
  border-radius: 5px;
}

.textCenter{
  text-align: center;
}

.green{
  color: #155724;
  background-color: #77BE9C;
  border-color: #c3e6cb;
}

.red{
  color: #721c24;
  background-color: #D44571;
  border-color: #f5c6cb;
}

#array{
  width:100%;
}

.informations{
  border-radius: 50px;
    background-color: #C1A98B;
    color: #fff;
    padding: 5px 15px;
}

.informationsBlock{
  margin: auto;
  width:150px;
  margin-bottom:10px;
}