Move padding directly to links and add color transition

- Add more space for the links making it easier to click.
- Add spacing between text and underline which looks nicer.
- Add 0.1s linear transition to all link colors.

static/css/global.css

@@ -44,6 +44,8 @@ hr {
 /* Navigation */
 header {
   background-color: var(--background-color);
+  padding-top: 4px;
+  padding-bottom: 4px;
 }
 
 nav {
@@ -58,13 +60,14 @@ nav {
 nav li {
   font-size: 1rem;
   font-weight: bold;
-  padding: 3px 10px;
   text-align: center;
 }
 
 /* Link effects */
 nav li a {
   text-decoration: none;
+  padding: 4px 8px;
+  transition: color 0.1s linear;
 }
 
 nav li a:hover {
@@ -74,6 +77,7 @@ nav li a:hover {
 
 a {
   color: var(--link-color);
+  transition: color 0.1s linear;
 }
 
 a:hover {