1 files changed, 72 insertions, 20 deletions
diff --git a/static/main.css b/static/main.css
index 9b8c6db..4db48f9 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1,48 +1,100 @@
 h1,h2,h3,h4 {
     text-align: center;
-    margin: 0.5em auto;
+    margin: 0.25em auto;
+    white-space: normal;
+}
+h3,h4 {
+    text-align: justify;
+    margin: 0.25em auto;
+}
+/* class to optionally center h3 when we want it */
+h3.center {
+    text-align: center;
+}
+h1 {
+    font-size: 200%;
+    color: #000000;
+}
+h2 {
+    font-size: 175%;
+    color: #404040;
+}
+h3 {
+    font-size: 150%;
+    color: #808080;
+}
+h4 {
+    font-size: 125%;
+    color: #bfbfbf;
 }
 body {
-    margin-left: auto;
-    margin-right: auto;
+    margin: 0 auto;
     text-align: center;
     font-family: Courier, Monospace;
     word-wrap: normal;
+    white-space: normal;
+    font-size: 120%;
 }
-/* some Stallman trickery for making mobile text bigger */
-@media screen and (max-device-width: 480px) {
-    body {
-        font-size: 200%
-    }
-    .license {
-        font-size: 75%;
-    }
-}
+
 .navbar {
     text-align: center;
-    max-width: 1000px;
+    max-width: 95%;
     display: block;
 }
 .content {
     text-align: justify;
-    max-width: 500px;
+    max-width: 85%;
     display: inline-block;
 }
 .license {
-    font-size: 65%;
+    font-size: 50%;
     text-align: center;
-    max-width: 350px;
+    max-width: 35%;
     display: block;
 }
+/* Use for long text which doesnt wrap nicely */
+.long {
+    word-wrap: break-word;
+}
 p {
-    margin-top: 0.75em;
-    margin-bottom: 0.75em;
+    margin-top: 1.5%;
+    margin-bottom: 1.5%;
+}
+small {
+    font-size: 75%;
+}
+code {
+    display: inline-block;
+    font-size: 125%;
+    background-color: #d8d8d8;
+    white-space: pre-wrap;
+    word-wrap: break-all;
 }
-
 table {
     border-spacing: 0 10px;
 }
 td {
     text-align: left
 }
-
+img {
+    max-width: 100%;
+    height: auto;
+    width: auto;
+}
+/*mobile*/
+@media screen and (max-device-width: 480px) {
+        body {
+        max-width: 100%;
+        font-size: 90%;
+        }
+        .license {
+        font-size: 0;
+        }
+        p {
+        margin-top: 5%;
+        margin-bottom: 5%;
+        }
+    code.long {
+        font-size: 65%;
+    }
+}