* {
    --cell-bkg-col: #ececec;
    --letter-played-col: #ffc9a6;
    --text-col: #003764;
    --border-col: #4388ff;
}

header h1{
    text-align: center;
    font-family: 'Poor Story', cursive;
    font-size: 4vw;
    color: var(--text-col);
    margin: 2vh;
}

#word-grid {
    display: grid;
    width: 20vw;
    row-gap: 16px;
    column-gap: 6px;
    margin: 0 auto;
    margin-top: 0;
    align-content: center;
    justify-self: center;
    justify-items: center;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
}

.cell {
    text-align: center;
    background-color: var(--cell-bkg-col);
    color: #050016;
    border: 2px solid var(--border-col);
    border-radius: 3px;
    width: 5vh;
    height: 5vh;
    font-size: 3.6vh !important;
    font-weight: bold;
    margin: 0px auto;
    padding-top: 0.4vh;
}

#keyboard > .cell {
    color: var(--text-col);
    font-size: 2.2vw;
    transition-timing-function: ease-in-out;
    transition-duration: 0.2s;
}

#keyboard .cell:hover {
    transform: scale(1.08);
    border-radius: 10px;
}

#keyboard {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(4, 1fr);
    column-gap: 6px;
    row-gap: 16px;
    width: 30vw;
    margin: 0 auto;
    margin-top: 4vh;
    align-content: center;
    justify-self: center;
    justify-items: center;
    padding: 0.6vw;
    font-size: 2.5vw;
    font-family: 'Courier New', Courier, monospace;
}