Improve the style of the game

src/js/Components.js

@@ -109,7 +109,6 @@ export function App()
  */
 export function Board({ board })
 {
-    console.log(board);
     let fields = board.flatMap((row) => row);
 
     return [

src/styles/style.css

@@ -1,23 +1,52 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+button {
+    padding: 0.5rem;
+    font-size: 1.3rem;
+    transition: 0.3s background-color ease-in-out;
+    background-color: azure;
+    border: lightblue solid 1px;
+    border-radius: 4px;
+}
+
+button:hover {
+    background-color: lightblue;
+}
+
+button:active {
+    background-color: rgb(96, 190, 221);
+}
+
 div {
     box-sizing: border-box;
 }
 
 .board {
-    width: min(84vw, 84vh);
+    width: 84vmin;
     margin: 10px auto;
     outline: 1px solid black;
 }
 
 .board .field {
     border: 1px solid black;
-    width: min(12vw, 12vh);
+    width: 12vmin;
-    height: min(12vw, 12vh);
+    height: 12vmin;
     display: flex;
     align-items: center;
     justify-content: center;
     float: left;
 }
 
+.game.winner.r .board, .game.winner.r .log {
+    background-color: pink;
+}
+
+.game.winner.b .board, .game.winner.b .log {
+    background-color: lightblue;
+}
+
 .board .row .field:first-child {
     clear: both;
 }
@@ -35,3 +64,21 @@ div {
 .board .field .red {
     background-color: red;
 }
+
+.log {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.game.winner .log {
+    font-size: 3rem;
+}
+
+.game .menu-bar {
+    text-align: center;
+}
+
+.game .menu-bar button {
+    margin: 0 5px 5px 0;
+}