:root {
    --grey: #2c2c2c;
}

ul ul {
    margin-left: -20px;
}

#boggleOutput {
    background-color:black;
    font-family:'Courier New',Courier,monospace;
    width:592px
}

#inputArea {
    color: var(--grey);
}

#boggleInput {
    color: navajoWhite;
    background-color: black;
    border: 2px solid navajoWhite;
    font-size: 1.3em;
    width: 485px;
}

#boggleInput:focus {
    outline: none;
}

#timer {
    color: red;
    font-weight: bold;
    padding-left: 30px;
    text-shadow: 1px 1px 4px darkGray;
}

table {
    border-collapse: collapse;
}

td, th {
    border: 2px solid orange;
    color: darkRed;
    text-align: center;
}

.boggleLetters {
    background-color: navajoWhite;
    border: 2px solid orange;
}

.boggleCell {
    border: 10px solid black;
    width: 3rem;
    height: 3rem;
    text-align: center;
    font-weight: bold;
    color: black;
}

.words-found {
    background-color: navajoWhite;
    min-height: 250px;
    padding: 1rem;
    width: 300px;
}

.word-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, max-content));
    gap: 0.1rem;
}

.word-item {
    text-align: center;
    color: black;
}

.score {
    margin-top: 1rem;
    text-align: center;
    background-color: darkRed;
    color: white;
    padding: 0.5rem;
    font-weight: bold;
}

/*canvas {*/
/*    display: none;*/
/*}*/

#p5_loading {
    display: none;
}

.framework {
    height: 80px;
    margin-top: 30px;
    margin-left: 50px;
}