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,10 +164,23 @@ 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)
     }
 
+    #mainNav {
+
       ul {
         display: flex;
         flex-direction: column;
@@ -196,4 +211,5 @@ nav {
       }
     }
   }
+}
 </style>