#grid,
#keyboard {
    width:550px;
}

body {
    font-size:3em;
}

input[type=radio] {
    width:3em;
    height:3em;
}

body {
    background-color: rgb(26,26,26);
    font-family: sans-serif;
}

#content {
    width:100%;
    height:95vh;
}

.letter-grid-frame {
    margin:auto;
    height:50vh;
    overflow: auto;
}

.keyboard-frame {
    bottom:5px;
    position:fixed;
    width:100%;
    height:25vh;
    overflow: hidden;
    touch-action: none;
    user-select: none;
}

.keyboard-row {
    text-align:center;
}

.letter-grid-cell {
    background-color: grey;
    color:white;
    display:inline-block;
    margin:5px;
    cursor:default;
    text-align:center;
    vertical-align:middle;
    user-select:none;
    font-weight:bold;
}

.keyboard-key {
    background-color: grey;
    color:white;
    display:inline-block;
    margin:5px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select:none;
    font-weight:bold;
    border-radius: 3px;
}

.keyboard-key[key='halfspace'] {
    background-color: unset;
}

.actions-icon {
    float:right;
    padding:1rem 3rem 1rem 1rem;
    color:white;
}

.message-frame {
    width:100%;
    height:10vh;
    text-align: center;
    color:green;
    font-size: 3rem;
    padding-top:30px
}

.game-settings-frame {
    margin:0.5rem;
    font-size: 3rem;
}

.game-settings-row {
    margin:2rem 1rem 2rem 1rem;
}

.game-settings-label {
    width:24rem;
    display: inline-block;
}

.game-settings-value {
    display:inline-block;
    width:24rem;
}

.game-settings-word-length-select,
.game-settings-difficulty-select {
    font-size: 3rem;
}

.game-settings-value input {
    width: 6rem;
}