#gridwrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}


#grid {
    display: inline-grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-rows: auto;
    border: black 4px double;
    margin: 0;
    box-shadow: 4px 4px lightgrey;
}

#grid div {
    border: black 1px solid;
    text-align: center;
    vertical-align: middle;
    width: 8em;
    height: 8em;
    word-wrap: break-word;
    font-size: 110%;
    font-weight: bold;
    padding: 0.5em;
    align-content: center;
}

#grid div.word {
    color: black;
}

#grid div.highlight {
    color: green;
}

#grid div.solved {
    background: lightgrey;
    color: red;
}

#grid div.bingo {
    background: lightpink;
    color: black;
}

#grid div.print {
    width: 120px !important;
    height: 120px !important;
    font-size: 16px !important;
}

#grid div.mouseover {
    color: red;
}

#messagebox {
    position: absolute;
    overflow: auto;
    z-index: 10;
    background: #ffffff;
    padding: 10px;
    border: 5px dashed red;
    text-align: center;
    font-size: 28px;
    padding-top: 28px;
    padding-bottom: 28px;
    opacity: 0;
    align-content: center;
}


@media (prefers-color-scheme: dark) {

    #grid {
        border-color: #fff;
        box-shadow: 4px 4px #666666;
    }

    #grid div {
        border-color: #fff;
    }

    #grid div.word {
        color: #fff;
    }

    #grid div.highlight {
        color: lime;
    }

    #grid div.solved {
        background: #202427;
        color: red;
    }

    #grid div.bingo {
        background: #4d000b;
        color: white;
    }

    #messagebox {
        background: #000;
    }


}