div.guess {
    font-size: 2rem;
    margin: 0.5ex;
    height: 2em;
    width: 9em;
    border: 1px solid black;
}

.letter, input[type=text] {
    font-size: 2rem;
    display: inline-block;
    height: 2rem;
    width: 2rem;
    padding: 0.5ex;
    margin: 0.1ex;
    border: 1px solid black;
    border-radius: 5px;
}

.correct {
    background-color: green;
}

.misplaced {
    background-color: orange;
}

.wrong {
    background-color: gray;
}

#correct {
    font-size: 2rem;
    color: white;
    background-color: black;
           
}

#keyboard {
    position: relative;
    background-color: gray;
    width: 43rem;
    height: 10rem;
    display: block;
}

#keyboard [data-key] {
    position: absolute;
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: tan;
    color: black;
    font-size: 2em;
    border: 1px solid black;
    border-radius: 5px;
    text-align: center;
}