minor cosmetic changes in the nav

src/components/Nav.vue

@@ -113,13 +113,15 @@ nav {
     li {
       font-size: 1.5rem;
       font-weight: lighter;
-      margin: 15px 5px 0 5px;
+      margin: 22px 10px 0 10px;
       cursor: pointer;
       transition: 100ms ease-in-out;
 
       &:first-child {
-        font-size: 1.5rem;
+        font-size: 2rem;
         font-weight: bold;
+        margin-top: 17px;
+        margin-left: 0;
       }
 
       &:hover {
@@ -162,36 +164,50 @@ nav {
 
 @media screen and (max-width: 768px) {
   nav {
+    button {
+      outline: 1px solid var(--bs-primary);
+
+      &:focus {
+        box-shadow: none;
+        outline: 1px solid var(--bs-primary);
+      }
+    }
+
     .navbar-collapse {
       background: var(--bs-secondary);
+      border-radius: 5px;
+      border: 1px solid var(--bs-primary)
     }
 
-    ul {
+    #mainNav {
-      display: flex;
-      flex-direction: column;
-      text-align: center;
-      width: 100%;
 
-      li {
+      ul {
-        line-height: 1;
+        display: flex;
-        padding: 0 0 20px 0;
+        flex-direction: column;
-        border-bottom: 1px solid rgba(255, 255, 255, .1);
+        text-align: center;
-      }
-    }
-
-    form {
-      label {
-        display: none;
-      }
-
-      input[type="search"] {
-        margin-bottom: 15px;
         width: 100%;
+
+        li {
+          line-height: 1;
+          padding: 0 0 20px 0;
+          border-bottom: 1px solid rgba(255, 255, 255, .1);
+        }
       }
 
-      button {
+      form {
-        display: block;
+        label {
-        margin-top: -15px;
+          display: none;
+        }
+
+        input[type="search"] {
+          margin-bottom: 15px;
+          width: 100%;
+        }
+
+        button {
+          display: block;
+          margin-top: -15px;
+        }
       }
     }
   }