2 color-scheme: light dark;
3 font-family: sans-serif;
18 grid-template-columns: max-content 1fr;
24 #scoresparkcontainer {
34 background-color: rgba(0, 0, 0, 0.6);
39 border: 1px solid white;
72 #refutationlines .move {
75 #refutationlines .score {
80 #refutationlines .depth {
85 .white-1e1d7.nonuglyhighlight {
86 background-color: #cce5cf;
88 .black-3c85d.nonuglyhighlight {
89 background-color: #9ab6a6;
101 transform: translate(0,0); /* Make it a containing block. */
108 width: calc(100% + 4px);
128 #whiteimbalance img, #blackimbalance img {
129 vertical-align: text-top;
146 /* If the board is too wide for the screen, shrink it to fit,
147 * and then put the analysis below. */
148 @media all and (max-width: 400px) {
158 /* If there is almost space for the analysis, shrink the board a bit, too. */
159 @media all and (min-width: 500px) and (max-width: 810px) {
170 text-decoration: none;
178 text-decoration: underline;
187 margin-bottom: 0.5em;
190 padding: 0.25em 1em 0.25em 1em;
193 border-right: 1px solid #bbb;
199 .pv, #pv, #history { /* Mute move colors a bit. */
203 .imbalance-inverted-piece {
208 .imbalance-piece, .imbalance-inverted-piece {
213 @media (prefers-color-scheme: dark) {
219 .pv, #pv, #history { /* Mute move colors a bit. */
225 a.move, a.move:link {
229 color: rgb(128,128,238);
234 .imbalance-inverted-piece {