Logo added to navigation bar using custom font

ProjectSourceCode/src/resources/css/navigation-bar/navigation-bar.css

@@ -1,6 +1,9 @@
 #navigation-bar-container {
     background-color: hsl(0, 98%, 40%);
     box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
+    height: 50px;
+
+    display: flex;
 }
 
 .sticky {
@@ -8,4 +11,21 @@
     top: 0;
     width: 100%;
     z-index: 1000; /* Adjust as needed */
-}
+}
+
+@font-face {
+    font-family: 'Scottsdale-Italic';
+    src: url('../fonts/Scottsdale-Italic.ttf') format('truetype');
+}
+
+#logo {
+    color: white;
+    text-decoration: none;
+    font-family: 'Scottsdale-Italic';
+    font-size: 25px;
+    margin-right: 10px;
+}
+
+#logo:hover {
+    font-size: 30px;
+}

ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs

@@ -6,7 +6,7 @@
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation" style="margin-right: 20px;">
         <span class="navbar-toggler-icon"></span>
       </button>
-      <a class="navbar-brand" href="#">ScoreSpot</a>
+      <a class="logo" id="logo" href="#">ScoreSpot</a>
     </div>
 
     <div class="collapse navbar-collapse" id="navbarToggler">