Pretty, prettier, am prettiesten

src/app/game/game.component.html

@@ -53,8 +53,8 @@
           <th>Team blau</th>
         </tr>
         <tr>
-          <th>{{gameStatus.red}}</th>
-          <th>{{gameStatus.blue}}</th>
+          <th class = "red">{{gameStatus.red}}</th>
+          <th class = "blue">{{gameStatus.blue}}</th>
         </tr>
       </table>
     </mat-card-content>

src/app/game/game.component.scss

@@ -20,11 +20,26 @@ table {
   font-size: x-large;
   font-weight: bold;
 }
-.FloatLeftAndCenterElement{width:100%;}
-.TimerLeft{ top: -150px; float:right;width:100px;}
+
+.TimerLeft
+{
+  top: -150px; float:right;width:100px;
+}
+
 body {
   font-family: sans-serif;
   display: grid;
   height: 100vh;
   place-items: center;
 }
+
+.blue{
+  margin: 5px;
+  color: rgba(0,0,139);
+}
+
+.red{
+  margin: 5px;
+  color: rgba(200, 0, 0);
+}
+

src/app/guesser/guesser.component.scss

@@ -26,7 +26,7 @@ table{
 .timer{
   position:relative;
   top: -60px;
-  left: 0px;
-  font-size: medium;
+  left: 0;
+  font-size: x-large;
   font-weight: bold;
 }

src/app/overview/overview.component.html

@@ -29,8 +29,8 @@
           <th>Team blau</th>
         </tr>
         <tr>
-          <th>{{gameStatus.red}}</th>
-          <th>{{gameStatus.blue}}</th>
+          <th class = "redfont">{{gameStatus.red}}</th>
+          <th class = "bluefont">{{gameStatus.blue}}</th>
         </tr>
       </table>
     </mat-card-content>

src/app/overview/overview.component.scss

@@ -18,6 +18,16 @@ table {
   background-color: rgba(200, 0, 0, 0.3);
 }
 
+.bluefont{
+  margin: 5px;
+  color: rgba(0,0,139);
+}
+
+.redfont{
+  margin: 5px;
+  color: rgba(200, 0, 0);
+}
+
 .choose{
   margin: 5px;
   cursor: pointer;