Add some color and style

front/style/home.css

@@ -1,4 +1,7 @@
 
+body {
+    background-color: #f8f8f1;
+}
 #main {
     margin-left : 10%;
     margin-right: 10%;
@@ -15,20 +18,25 @@
 
 #header { 
     text-align: center;
-    background-color: green;
+    background-color: #303030;
     margin : 0px;
+    /* border-radius: 0.75cap; */
 }
 
+#IQBall {
+    color : #ffa238;
+    font-weight: bold;
+    font-size : 45px;
+}
 #body {
     display: flex;
     flex-direction: row;
-    border : solid 10px violet;
     margin:0px;
     height: 100%;
+    background-color: #fff3e5;
  }
 
 #personal-space {
-    background-color: orange;
     display: flex;
     flex-direction: column;
 
@@ -102,7 +110,7 @@
 }
 
 .dataTactic:hover {
-    background-color: red;
+    background-color: #c9d1e0;
     cursor : pointer;
 }
 
@@ -133,6 +141,6 @@ ul {
 }
 
 .ButtonSideMenu:hover {
-    background-color: red;
+    background-color: #c9d1e0;
     cursor : pointer;
 }

front/views/Home.tsx

@@ -28,7 +28,7 @@ export default function Home({ lastTactics, allTactics, teams } : { lastTactics
 export function Title() {
     return (
         <div id="header">
-            <h1 id="IQBall"><span id="IQ">IQ</span><span id="B">B</span>all</h1>
+            <h1 id="IQBall"><span id="IQ">IQ</span><span id="Ball">Ball</span></h1>
         </div>
     )
 }