/* We want our board to be the largest square that can
* fit. Unfortunately, it requires a bit of CSS magic to make that
- * happen. We can set a wdith easily enough, but what we can't easily
+ * happen. We can set a width easily enough, but what we can't easily
* do is to set the height to be exactly the same as the width.
*
* So here's the magic to get that to happen. On the board container
* any child sas "height: 100%" that will result in a 0-height child
* and won't be what we want.
*
- * So the last piece of the magic is to use absolute palcement of the
- * board (which require position:relative on its parent) and set all
+ * So the last piece of the magic is to use absolute placement of the
+ * board (which requires position:relative on its parent) and set all
* of its edges (top, left, bottom, right) to the extents of the
* container.
*
display: flex;
justify-content: center;
align-items: center;
- font-size: 5vmin;
+ font-size: calc(min(8vw, .08 * var(--page-max-width)));
+ line-height: 0;
font-weight: bold;
border-bottom: 1px solid #999;
border-right: 1px solid #999;