From b1ace6ceb3a1db013d83f5b06242197284145947 Mon Sep 17 00:00:00 2001
From: Manuel Thalmann <m@nuth.ch>
Date: Fri, 23 Dec 2022 16:01:06 +0100
Subject: [PATCH] Improve the style of the game

---
 src/styles/style.css | 53 +++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 50 insertions(+), 3 deletions(-)

diff --git a/src/styles/style.css b/src/styles/style.css
index 416e849..290525f 100644
--- a/src/styles/style.css
+++ b/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);
-    height: min(12vw, 12vh);
+    width: 12vmin;
+    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;
+}