added search-icon to nav, changed gradient in matches

.gitignore

@@ -6,6 +6,7 @@ node_modules
 # local env files
 .env.local
 .env.*.local
+.env
 
 # Log files
 npm-debug.log*

src/components/Nav.vue

@@ -18,7 +18,7 @@
         </ul>
         <form class="d-flex" data-bs-target="#mainNav.show" @keydown.enter.prevent="parseSearch">
           <label for="search">
-            <i class="bi bi-search"></i>
+            <i class="fas fa-search"></i>
           </label>
 
           <input id="search" v-model="data.searchInput" aria-label="Search"

src/components/ScoreTeam.vue

@@ -101,6 +101,7 @@ table {
   text-align: center;
   margin-top: 120px;
   margin-bottom: -100px;
+  //background: black;
 
   caption {
     color: white;

src/views/Match.vue

@@ -15,7 +15,7 @@
         {{ FormatFullDate(data.matchDetails.date) }}
       </p>
       <p class="text-center fs-6">
-        <span class="text-muted">Match Length:</span> {{ data.matchDetails.rounds === 16 ? 'Short' : 'Long' }}
+        <span class="text-muted">Match Length:</span> {{ data.matchDetails.max_rounds === 16 ? 'Short' : 'Long' }}
         <svg class="bi bi-circle-fill mx-2" fill="currentColor" height="8" viewBox="0 0 16 16" width="8"
              xmlns="http://www.w3.org/2000/svg">
           <circle cx="8" cy="8" r="8"/>
@@ -149,7 +149,6 @@ export default {
       rgba(0, 0, 0, 0.95) 70%,
       rgba(0, 0, 0, .7) 100%
   );
-  border-bottom: 1px solid rgba(255, 255, 255, .2);
 
   .map img {
     width: auto;
@@ -166,10 +165,10 @@ export default {
   z-index: 1;
   max-width: 100vw;
   background: linear-gradient(90deg,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(15, 15, 15, 0.9) 25%,
-      rgba(15, 15, 15, 0.9) 75%,
-      rgba(0, 0, 0, 0) 100%
+      rgba(0, 0, 0, 0.6) 0%,
+      rgba(0, 0, 0, 0.85) 30%,
+      rgba(0, 0, 0, 0.85) 70%,
+      rgba(0, 0, 0, .6) 100%
   );
 
   div {
@@ -182,6 +181,14 @@ export default {
 .nav {
   max-width: 100vw;
   background: rgba(0, 0, 0, 0.9);
+  background: linear-gradient(90deg,
+      rgba(0, 0, 0, 0.7) 0%,
+      rgba(0, 0, 0, 0.95) 30%,
+      rgba(0, 0, 0, 0.95) 70%,
+      rgba(0, 0, 0, .7) 100%
+  );
+  border-top: 1px solid rgba(255, 255, 255, .2);
+  border-bottom: 1px solid rgba(255, 255, 255, .2);
 
   .list-item {
     padding: 10px 10px;