Rebrand

frontend/src/main.scss

@@ -41,6 +41,18 @@ h1 {
   font-size: 6rem;
   text-align: center;
   padding-bottom: $medium-padding;
+  width: fit-content;
+  margin-inline: auto;
+  background: linear-gradient(90deg, $bright-blue, $bright-red);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+
+  &::selection {
+    color: white;
+    -webkit-text-fill-color: white;
+    background-color: $accent;
+  }
 
   @media (max-width: $height-breakpoint) {
     font-size: 4.5rem;
@@ -51,15 +63,6 @@ h1 {
   }
 }
 
-.red {
-  color: $accent;
-
-  &::selection {
-    color: $accent;
-    background-color: white;
-  }
-}
-
 html,
 body,
 canvas {
@@ -126,14 +129,14 @@ body {
       border-radius: 1000px;
       transition: transform 200ms;
 
-      &.decla {
-        color: $bright-decla;
+      &.blue {
+        color: $bright-blue;
 
         .health {
-          background-color: $bright-decla;
+          background-color: $bright-blue;
 
           &:before {
-            background-color: $bright-decla;
+            background-color: $bright-blue;
             opacity: 0.3;
           }
         }
@@ -211,8 +214,8 @@ body {
       font-weight: 700;
       animation: falling-point 2s ease-out forwards;
 
-      &.decla {
-        color: $bright-decla;
+      &.blue {
+        color: $bright-blue;
       }
 
       &.red {
@@ -232,8 +235,8 @@ body {
       mask-image: url('../static/chevron.svg');
       mask-size: contain;
 
-      &.decla {
-        background-color: $bright-decla;
+      &.blue {
+        background-color: $bright-blue;
       }
 
       &.red {
@@ -324,8 +327,8 @@ body {
         display: none;
       }
 
-      .decla {
-        color: $bright-decla;
+      .blue {
+        color: $bright-blue;
       }
 
       .red {
@@ -374,10 +377,10 @@ body {
         transition: width $animation-time;
       }
 
-      .fill.decla {
+      .fill.blue {
         right: 50%;
-        background: $bright-decla;
-        color: $bright-decla;
+        background: $bright-blue;
+        color: $bright-blue;
         border-radius: 1000px 0 0 1000px;
       }
 
@@ -425,7 +428,7 @@ body {
           font-size $animation-time;
       }
 
-      .score.decla {
+      .score.blue {
         right: calc(50% + #{$small-padding});
       }
 
@@ -438,10 +441,10 @@ body {
         font-size: 1.2rem;
       }
 
-      .score.decla.leading {
+      .score.blue.leading {
         text-shadow:
           0 0 3px rgba(0, 0, 0, 0.95),
-          0 0 8px $bright-decla;
+          0 0 8px $bright-blue;
       }
 
       .score.red.leading {
@@ -471,9 +474,9 @@ body {
           border-bottom: 5px solid currentColor;
         }
 
-        &.decla {
+        &.blue {
           right: calc(50% + #{$small-padding});
-          color: $bright-decla;
+          color: $bright-blue;
         }
 
         &.red {