fixing things

src/app/footer/footer.component.html

@@ -1,23 +1,18 @@
 <footer>
-  <!-- <div class="footer">
-    <div>
-      <a href="https://discord.zelda64.dev/">
-        Contact Us <fa-icon [icon]="discord"></fa-icon>
-      </a>
-    </div>
-    <p class="copyright">ZeldaRET © 2020 - {{ year }}</p>
-  </div> -->
   <mat-toolbar color="primary">
     <mat-toolbar-row fxLayout="row" fxLayoutAlign="center center">
       <div>
-        <a href="https://discord.zelda64.dev/">
+        <a id="links" href="https://discord.zelda64.dev/">
           <fa-icon [icon]="discord"></fa-icon> Contact Us
         </a>
+        <a id="links" href="https://github.com/zeldaret">
+          <fa-icon [icon]="gh"></fa-icon> Contribute
+        </a>
       </div>
     </mat-toolbar-row>
     <mat-toolbar-row fxLayout="row" fxLayoutAlign="center center">
       <div>
-        <p class="copyright">ZeldaRET © 2020 - {{ year }}</p>
+        <p class="copyright"> © ZeldaRET 2020 - {{ year }}</p>
       </div>
     </mat-toolbar-row>
   </mat-toolbar>

src/app/footer/footer.component.scss

@@ -13,10 +13,26 @@ mat-toolbar-row {
   text-align: center;
 }
 
+#links {
+  font-size: 15px;
+  height: 90%;
+  align-items: center;
+  display: inline-flex;
+  padding: 1em;
+  gap: 0.5em;
+  text-decoration: none;
+  color: white;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+}
+
 .copyright {
   margin-top:10px;
   text-align:center;
   font-size:15px;
-  color: gray;
+  color: white;
   margin-bottom:0;
 }

src/app/footer/footer.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { faDiscord } from '@fortawesome/free-brands-svg-icons';
+import { faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
 
 /**
  * Application footer.
@@ -17,6 +17,7 @@ export class FooterComponent {
    * Icon definition.
    */
   discord = faDiscord;
+  gh = faGithub;
   year = new Date().getFullYear();
 
 }

src/app/page-not-found/gameover.html

@@ -1,5 +1,7 @@
-<h1 mat-dialog-title>GAME OVER</h1>
-<div mat-dialog-content>
-  Returning you to the Main Menu
+<h1 mat-dialog-title id="fire-text">GAME OVER</h1>
+<div mat-dialog-content style="text-align: center;">
+  <p class="fire-text">
+    Returning you to the Main Menu
+  </p>
 </div>
 

src/app/page-not-found/gameover.scss

@@ -0,0 +1,8 @@
+#fire-text {
+  font-family: “Open Sans”, sans-serif;
+  color: #f5f5f5;
+  text-shadow: 0px -2px 4px #fff, 0px -2px 10px #ff3, 0px -10px 20px #f90,
+    0px -20px 40px #c33;
+  font-size: 50px;
+  text-align: center;
+}

src/app/page-not-found/page-not-found.component.html

@@ -2,7 +2,7 @@
   <mat-card-title>ERROR 404</mat-card-title>
   <mat-card-subtitle>The requested page cannot be found!</mat-card-subtitle>
   <mat-card-actions>
-    <button on-click="continueGame()" mat-raised-button color="primary">Continue?</button>
-    <button on-click="quitGame()" mat-raised-button color="warn">Quit</button>
+    <button on-click="continueGame()" mat-raised-button>Continue</button>
+    <button on-click="quitGame()" mat-raised-button>Quit</button>
   </mat-card-actions>
 </mat-card>

src/app/page-not-found/page-not-found.component.ts

@@ -37,6 +37,7 @@ export class PageNotFoundComponent {
 @Component({
   selector: 'gameover-dialog',
   templateUrl: 'gameover.html',
+  styleUrls: ['./gameover.scss']
 })
 export class GameoverDialog {
   constructor(