Some styling changes

Author: Drarig29

src/style.scss

@@ -1,11 +1,9 @@
 $round-margin: 50px;
-$match-width: 200px;
+$match-width: 192px;
 
 $connector-width: $round-margin / 2;
-$connector-borders: 2px solid var(--connector-color);
+$connector-borders: 2px solid var(--border-color);
 
-$win-color: #50b649;
-$loss-color: #e61a1a;
 $match-borders: 1px solid var(--border-color);
 $match-borders-radius: 0.3rem;
 
@@ -31,14 +29,15 @@ $match-borders-radius: 0.3rem;
   user-select: none;
 
   --primary-background: #fff;
-  --secondary-background: #ddd;
+  --secondary-background: #eceff1;
   --font-color: #212529;
   --win-color: #50b649;
   --loss-color: #e61a1a;
+  --label-color: grey;
   --hint-color: #a7a7a7;
   --connector-color: #9e9e9e;
   --border-color: #d9d9d9;
-  --border-hover-color: #009dff;
+  --border-hover-color: #b6b5b5;
 }
 
 h1,
@@ -60,7 +59,7 @@ h2 {
 
 h3 {
   text-align: center;
-  background: #eceff1;
+  background: var(--secondary-background);
   font-size: 16px;
   padding: 10px;
 }
@@ -197,7 +196,7 @@ h3 {
     font-size: 0.8rem;
     background: white;
     padding: 0 5px;
-    color: var(--hint-color);
+    color: var(--label-color);
     border-radius: 3px;
   }
 
@@ -239,7 +238,7 @@ h3 {
 .team {
   display: flex;
   justify-content: space-between;
-  padding: 3px 12px;
+  padding: 2px 8px;
   background: var(--primary-background);
 
   &.hover {
@@ -281,13 +280,14 @@ h3 {
 
 .result {
   margin-left: 10px;
+  width: 15%;
   text-align: center;
 
   &.win {
-    color: $win-color;
+    color: var(--win-color);
   }
 
   &.loss {
-    color: $loss-color;
+    color: var(--loss-color);
   }
 }