main {
    margin: auto;
    max-width: 38em;
}

input[type=text] {
    font-size: 2em;
    color: white;
    text-align: center;
    text-transform: uppercase;
    padding: 6px 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}

input[type=text]:invalid {
    background-color: red !important;
}

.section {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.at input[type=text] {
    background-color: #538d4e;
}

div[class^=with-] input[type=text] {
    background-color: #b59f3b;
}

.without input[type=text] {
    background-color: #3a3a3c;
}

#words {
    font-family: monospace;
    font-size: 1.7rem;
    max-height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
}