Updated CSS

css/style.css

@@ -1,29 +1,27 @@
 @font-face {
-  font-family: 'DM Mono';
+  font-family: 'Work Sans';
-  src: url('DMMono-Regular.woff2');
+  src: url('WorkSans-Regular.woff2');
   font-weight: normal;
 }
 
 @font-face {
-  font-family: 'DM Mono';
+  font-family: 'Work Sans';
-  src: url('DMMono-Medium.woff2');
+  src: url('WorkSans-Medium.woff2');
   font-weight: bold;
 }
 
 @font-face {
-  font-family: 'DM Mono';
+  font-family: 'Work Sans';
-  src: url('DMMono-Italic.woff2');
+  src: url('WorkSans-Italic.woff2');
   font-style: italic;
 }
 
 :root {
-  --txt: #c0ccdb;
+  --txt: #f2f4f8;
-  --body-bg: #17191c;
+  --body-bg: #161616;
-  --accent: #e4d294;
+  --accent: #6690d9;
-  --border: #76818e;
+  --border: #222;
-  --border-light: #a0a8b1;
+  --font-body: 'Work Sans', sans-serif;
-  --green: #5da892;
-  --font-body: 'DM Mono', 'Lucida Console', 'Monaco', 'Courier New', 'Courier', monospace;
 }
 
 body {
@@ -42,22 +40,9 @@ header {
   font-size: 2rem;
 }
 
-/* Add typewriter animation when text fits without line break */
-@media screen and (min-width: 570px) {
-  header {
-    display: inline-block;
-    overflow: hidden;
-    white-space: nowrap;
-    border-right: .05em solid var(--accent);
-    padding-right: 10px;
-    animation: typing 1s steps(80), blink-cursor 2s infinite;
-  }
-}
-
 header a {
   color: var(--accent);
   text-decoration: none;
-  font-style: italic;
 }
 
 nav,
@@ -66,20 +51,22 @@ footer {
 }
 
 nav a {
+  background-color: var(--border);
   border: 1px solid var(--border);
   border-radius: .3rem;
   margin: .7rem;
   padding: .4rem 1.2rem;
   text-decoration: none;
-  box-shadow: 0px 2px 3px -2px rgba(0,0,0,.3);
+  box-shadow: 0px 2px 3px 2px rgba(0,0,0,.3);
   user-select: none;
   cursor: pointer;
   display: inline-block;
 }
 
 nav a:hover {
+  background-color: var(--body-bg);
+  border: 1px solid var(--border);
   color: var(--txt);
-  border: 1px solid var(--border-light);
 }
 
 main {
@@ -103,30 +90,6 @@ main ul {
   display: block;
 }
 
-@media screen and (min-width: 900px) {
-  .quick-fixes {
-    max-width: 75% !important;
-  }
-}
-
-@media screen and (max-width: 899px) {
-  .quick-fixes {
-    max-width: 90% !important;
-  }
-}
-
-.quick-fixes-table {
-  border-collapse: collapse;
-  table-layout: fixed;
-  width: 100%;
-}
-
-.quick-fixes-table th,
-.quick-fixes-table td {
-  border: thin solid var(--border);
-  padding: .5rem;
-}
-
 .author {
   float: left;
   max-width: 400px;
@@ -152,11 +115,11 @@ main ul {
 }
 
 .no-dollar::before {
-  content: '' !important;
+  content: '';
 }
 
 .cowsay {
-  font-family: var(--font-body);
+  font-family: monospace;
   text-align: left;
   white-space: pre;
   max-width: fit-content;
@@ -176,18 +139,15 @@ a {
   transition: 300ms;
 }
 
-a:hover,
-a:active {
-  color: var(--accent);
-}
-
 h1,
 h2,
 h3,
 h4,
 h5,
-h6 {
+h6,
-  color: var(--green);
+a:hover,
+a:active {
+  color: var(--accent);
 }
 
 code {
@@ -197,21 +157,3 @@ code {
   margin: .3rem;
 }
 
-@keyframes typing {
-  from {
-    max-width: 0;
-  }
-  to {
-    max-width: 80%;
-  }
-}
-
-@keyframes blink-cursor {
-  from,
-  to {
-    border-color: transparent;
-  }
-  50% {
-    border-color: var(--accent);
-  }
-}