Update the styling a bit to match better with our landing page

Author: MinThaMie

index.html

@@ -14,7 +14,7 @@
   <style type="text/css">
     :root {
       --ember-brand: #E04E39;
-      --ember-black: #212121;
+      --ember-black: #1c1e24;
       --ember-burnt-ember: #9b2918;
       --ember-gray: #817f7f;
       --ember-blue: #1e719b;
@@ -58,26 +58,31 @@
       --color-button-bg: var(--ember-brand);
       --color-button-bg-hover: var(--color-brand-hc-dark);
       --container-width: 60.75rem;
+      --font-family-sans: "Inter var", "Inter web", -apple-system,
+    BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
+    Apple Color Emoji, Segoe UI Emoji;
+  --font-family-mono: SFMono-Regular, Consolas, Liberation Mono, Menlo,
+    monospace;
     }
 
     body {
       background: var(--ember-black);
       color: var(--ember-white);
       margin: 0;
       padding: 0;
-      font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
+      font-family: var(--font-family-sans);
     }
 
     a {
       display: block;
       color: var(--color-button-text);
       background: var(--color-button-bg);
       text-decoration: none;
-      font-weight: 600;
+      text-align: center;
       font-size: var(--font-size-md);
       padding: var(--spacing-1) var(--spacing-3);
       border-radius: var(--radius);
-      line-height: var(--line-height-sm);
+      line-height: var(--line-height-md);
       transition: background-color .2s, color .1s;
     }
     a:hover {
@@ -183,9 +188,7 @@ <h1 class="text-hero-xl" id="hero-title">
     </header>
 
     <a href="https://emberjs.com/">
-      Visit Ember.JS
-      <br>
-      https://emberjs.com/
+      Visit Ember.js
     </a>
   </div>