@media (min-width: 576px) {
    .main {
        max-width: 510px;
        padding-right: 0;
        padding-left: 0;
    }
}
@media (min-width: 768px) {
    .main {
        max-width: 700px;
    }
}
@media (min-width: 1024px) {
    .main {
        max-width: 950px;
    }
}
@media (min-width: 1280px) {
    .main {
        max-width: 1200px;
    }
}
@media (min-width: 1536px) {
    .main {
        max-width: 1450px;
    }
}
body {
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
    font-family: sans-serif;
    min-height: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows: 1fr auto;
}
.main {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}
th, td { border: 1px solid; vertical-align: top; }
table { border-collapse: collapse; border: 1px solid; }
.hidecol, .warning { display: none; }
td.warning.override,th.warning.override { display: table-cell; }
div.warning.override { display: block; }
.clicky { cursor: pointer; font-weight: bold; text-align: center; vertical-align: middle; }
table.vert .clicky { padding: 1em; }
.clicky:hover { background-color: #aaddee; }
.yesnode { background-color: #ccffcc; }
.nonode { background-color: #ffcccc; }
.targetword { padding: 0 0.5em; }
.yaybox { border: 1px solid #888; justify-content: center; align-content: center; }
.gridwrap { display:inline-grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr); border: 1px solid; }
.picker { margin: 0.5em; }
.gridclicky { place-content: center; padding: 1em; }
.pickersum { font-weight: normal; }
.wordhere { padding: 0 0.5em; }
.dupewarn {
    border: 2px solid red;
    margin-bottom: 1em;
}
.dupewarn li {
    font-weight: bold;
}
th.pickercol, td.pickercol {
    cursor: pointer;
    width: 1em;
    text-align: center;
}
.pickercol.hovering {
    background-color: #ffa;
}
.warning {
    background-color: rgba(0,0,0,0.2);
}
.best {
    /* Hmm, can't figure out a clean visual indicator for now ... */
    /*background-color: #dfd;*/
}
.solution {
    cursor: pointer;
}
.solution:hover {
    color: blue;
    font-weight: bold;
}
@media print {
    .no-print, .no-print * {
        display: none !important;
    }
}