a better tab switching visual effect

css/style.css

@@ -22,6 +22,7 @@ header {
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: center;
+    line-height: 2em;
     padding: 5px 20px 5px 20px;
 }
 
@@ -32,6 +33,7 @@ header {
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: center;
+    line-height: 1.5em;
     padding: 5px 20px 5px 20px;
 }
 
@@ -43,22 +45,28 @@ nav {
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: space-between;
+    line-height: 1.5em;
     padding: 5px 20px 5px 20px;
 }
 
 .nav-item {
-    background-color: #ddd;
-    border: 1px solid #ccc;
-    padding: 3px 10px 3px 10px;
+    background-color: #eee;
+    border-left: 1px solid #fff;
+    border-right: 1px solid #ccc;
     cursor: pointer;
+    flex-grow: 1;
+    padding: 3px 10px 3px 10px;
+    text-align: center;
     user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -webkit-user-select: none;
 }
 
-.nav-item:hover {
-    background-color: #eee;
+nav .selected {
+    background-color: #ccc;
+    cursor: auto;
+    font-weight: bold;
 }
 
 main {