+#boardcontainer {
+ width: 400px;
+ margin-right: 1em;
+ margin-bottom: 1em;
+ float: left;
+}
+#board {
+ display: block;
+ width: 100%;
+ padding: 0;
+}
+#hiddenboard {
+ display: none;
+}
+#bottompanel {
+ display: block;
+ width: 100%;
+ font-size: smaller;
+ margin-top: 0.5em;
+ margin-bottom: 0;
+}
+#numviewers {
+ width: auto;
+ text-align: center;
+}
+#whiteinfo {
+ float: left;
+ text-align: left;
+ min-width: 20%;
+}
+#blackinfo {
+ float: right;
+ text-align: right;
+ min-width: 20%;
+ margin-right: 5px;
+}
+#whiteimbalance img, #blackimbalance img {
+ vertical-align: text-top;
+}
+#whiteimbalance {
+ margin-left: 5px;
+}
+#blackimbalance {
+ margin-right: 5px;
+}
+.running-clock {
+ font-weight: bold;
+}
+#analysis {
+ display: block;
+ min-width: 400px;
+ overflow: hidden;
+}
+
+/* If the board is too wide for the screen, shrink it to fit,
+ * and then put the analysis below. */
+@media all and (max-width: 400px) {
+ #boardcontainer {
+ width: 100%;
+ float: none;
+ }
+ #analysis {
+ min-width: 0;
+ }
+}
+
+/* If there is almost space for the analysis, shrink the board a bit, too. */
+@media all and (min-width: 500px) and (max-width: 810px) {
+ #boardcontainer {
+ float: left;
+ width: 50%;
+ }
+ #analysis {
+ min-width: 0;
+ }
+}
+a.move {
+ color: black;
+ text-decoration: none;
+}
+a.move.highlight {
+ color: red;
+ font-weight: bold;
+}
+a.move:hover {
+ font-weight: bold;
+ text-decoration: underline;
+}
+
+#linenav {
+ display: none;
+}
+#lomonosov {
+ display: none;
+}
+
+#games {
+ font-size: smaller;
+ margin-bottom: 0.5em;
+}
+.game {
+ padding: 0.25em 1em 0.25em 1em;
+ margin: 0;
+ background: #eee;
+ border-right: 1px solid #bbb;
+}
+.game:last-of-type {
+ border-right: none;
+}
+
+.pv, #pv, #history, #lowdepth .depth { /* Mute move colors a bit. */
+ color: #555;
+}
+
+@media (prefers-color-scheme: dark) {
+
+body {
+ background: black;
+ color: #eee;
+}
+.pv, #pv, #history { /* Mute move colors a bit. */
+ color: #bbb;
+}
+#numviewers {
+ color: #bbb;
+}
+a.move, a.move:link {
+ color: #eee;
+}
+a:link {
+ color: rgb(128,128,238);
+}
+
+}