#wordle-container {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.guess-letters-row, .keyboard-row {
    display: flex;
    flex-direction: row;
}

.guess-letters-row {
    gap: 6px;
    justify-content: center;
}

.keyboard-row {
    gap: 5px;
}

#wordle-message {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600; 
    font-size: 1.1em;
}

.wordle-keyboard-key {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600; 
    font-size: 0.85em;
    border: none; 
    border-radius: 4px;
    cursor: pointer; 
    text-transform: uppercase;
}

.letter-container, .wordle-keyboard-key {
    width: min(50px, 7vw);
    height: min(50px, 7vw);
}

.letter-container {
    border: 1px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
}

#wordle-guesses-container, #wordle-keyboard {
    margin: 2rem auto;
    display:flex; 
    flex-direction:column; 
    gap:6px; 
    width: 100%;
}

#wordle-keyboard {
    align-items:center;
}

.correct {
    background-color: #3a7d44;
}

.present {
    background-color: #b59f3b;
}

.absent {
    background-color: #403d49;
}