Update the background photo for the countdown

index.html

@@ -8,7 +8,8 @@
     <link rel="shortcut icon" href="https://www.studentrobotics.org/images/favicon.ico"/>
 
     <title>Countdown</title>
-
+
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"/>
     <link rel="stylesheet" href="https://www.studentrobotics.org/style/css/main.css"/>
     <link rel="stylesheet" href="static/index.css"/>
     <link rel="stylesheet" href="https://unpkg.com/dseg@0.46.0/css/dseg.css"/>

static/index.css

@@ -3,8 +3,8 @@ main {
     justify-content:center;
     align-items:center;
 
-    width: 66%;
-    height: 66%;
+    width: 33%;
+    height: 33%;
 }
 
 body {
@@ -25,7 +25,15 @@ main h1 {
 }
 
 main h1#countdown {
-    font-family: 'DSEG7-Classic';
+    font-family: 'Open Sans';
     font-weight: bold;
-    transform: translateX(-8%); /* HACK: Offset so the time is centred, not the whole text */
+    transform: translateX(72%) translateY(110%);
+    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
 }
+
+main h1#message {
+    font-family: 'Open Sans';
+    font-weight: bold;
+    transform: translateX(75%) translateY(70%);
+    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
+}

static/index.js

@@ -9,7 +9,7 @@ function showMessage(text) {
 function updateCountdown(target) {
     const duration = target.diffNow();
     if (duration.valueOf() <= 0) {
-        showMessage("Starting soon!");
+        showMessage("Soon!");
     } else {
         document.getElementById(COUNTDOWN_ELEMENT_ID).innerText = duration.toFormat("-hh:mm:ss");
     }