update style

style.css

@@ -80,12 +80,16 @@ CUSTOM STYLE
 ================================================= 
 */
 
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+
 :root {
   /* https://materialui.co/colors/ */
   --hue-primary: 65.52;
-  --sat-primary: 69.96%;
+  --sat-primary: 20%;
   --background: hsl(var(--hue-primary), var(--sat-primary), 96.08%);
   --background-primary: hsl(var(--hue-primary), var(--sat-primary), 93.33%);
+  --background-secondary: hsl(var(--hue-primary), var(--sat-primary), 90%);
   --color-primary: hsl(var(--hue-primary), var(--sat-primary), 50%);
   --text-primary: hsl(var(--hue-primary), var(--sat-primary), 25%);
   --text-secondary: hsl(var(--hue-primary), var(--sat-primary), 30%);
@@ -99,16 +103,12 @@ https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41
 ================================================= 
 */
 
-* {
-  box-sizing: border-box;
-  font-family: Verdana, serif;
-  color: var(--text-primary);
-}
-
 html,
 body {
   padding: 0;
   max-width: 100%;
+  color: var(--text-primary);
+  font-family: "Roboto", Verdana, serif;
 }
 
 body {
@@ -122,10 +122,6 @@ main {
   min-height: 100%;
 }
 
-h1 {
-  margin-bottom: 0.5em;
-}
-
 table {
   border-collapse: collapse;
   width: 100%;
@@ -138,7 +134,7 @@ h3,
 h4,
 h5,
 h6 {
-  margin: 1.5em 0 0.5em;
+  margin: 1em 0 0.5em;
 }
 
 p,
@@ -146,7 +142,23 @@ ul,
 ol {
   margin-bottom: 2em;
   color: var(--text-secondary);
-  font-family: sans-serif;
+}
+
+textarea,
+input,
+select,
+.mono {
+  font-family: "Roboto Mono", monospace;
+}
+
+textarea {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+}
+
+a {
+  color: inherit;
 }
 
 @media only screen and (min-width: 768px) {