Experimental theme change

* Change paragraph, code, heading fonts
* Widen viewport

docs/_template/light-dark-theme/styles/dark.css

@@ -7,6 +7,15 @@ body {
     color: #C0C0C0;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: #E0E0E0;
+}
+
 button,
 a {
     color: #64B5F6;

docs/_template/light-dark-theme/styles/gray.css

@@ -7,6 +7,15 @@ body {
     color: #dddddd;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: #EEEEEE;
+}
+
 button,
 a {
     color: #64B5F6;

docs/_template/light-dark-theme/styles/master.css

@@ -1,14 +1,37 @@
-@import url('https://fonts.googleapis.com/css?family=Titillium+Web|Noto+Sans');
+@import url('https://fonts.googleapis.com/css?family=Roboto|Muli|Fira+Mono');
 
 html,
 body {
-    font-family: 'Titillium Web', 'Segoe UI', Tahoma, Helvetica, sans-serif;
+    font-family: 'Roboto', 'Segoe UI', Tahoma, Helvetica, sans-serif;
     font-display: optional;
     height: 100%;
     font-size: 15px;
     scroll-behavior: smooth;
 }
 
+code{
+    font-family: 'Fira Mono', 'Courier New', Courier, monospace
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: 'Muli', Verdana, Geneva, Tahoma, sans-serif;
+    line-height: 130%;
+}
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3 {
+  font-weight: 600;
+}
+
 #logo
 {
     max-width: 100px;
@@ -57,16 +80,6 @@ article.content h6{
     transition: all .25s ease-in-out;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    font-family: 'Noto Sans', Verdana, Geneva, Tahoma, sans-serif;
-    line-height: 130%;
-}
-
 .sideaffix {
     line-height: 140%;
 }
@@ -173,3 +186,12 @@ span.arrow-d{
 span.arrow-r{
     top: 6px; position: relative;
 }
+
+/* widen viewport */
+
+@media (min-width: 1085px) {
+    .container {
+        width: calc(100% - 15vw);
+        max-width: calc(100% - 15vw);
+    }
+}