diff --git a/TODO b/TODO
index e64d2d4..80402b0 100644
--- a/TODO
+++ b/TODO
@@ -1,11 +1,17 @@
 get RSS feed up and running
 
-emphasis category viewer is in via different header color
+emphasize category viewer is in via different header color
 
 specify ul styling to be specific to posts list
 
 experiment with ul margin vs padding in posts list for accessibility without focus border looking ridiculous
 
+Fix typography on mobile (mostly just anchors at this point)
+    https://stackoverflow.com/questions/16387400/getting-the-right-font-size-on-every-mobile-device#35155083
+    https://css-tricks.com/viewport-sized-typography/
+
+make tapping and holding or hovering changes header nav-link bg
+
 maybe make it so #content or a parent class which has everything but header scrolls intead of the normal page, needs and overflow css attr and height 100% for body/html and maybe flex-box and/or grid (this is to make scroll not appear on header)
 
 Fix articles with inline html in them and/or links
@@ -13,6 +19,8 @@ Fix articles with inline html in them and/or links
 ico?
 
 analytics
+    https://github.com/electerious/Ackee
+    https://umami.is/ (https://github.com/umami-software/umami)
 
 Webmention analytics https://www.w3.org/TR/webmention/#receiving-webmentions
 
diff --git a/static/css/colors.css b/static/css/colors.css
index 9b4d0a1..ae97e23 100644
--- a/static/css/colors.css
+++ b/static/css/colors.css
@@ -14,6 +14,7 @@
     --link-unclicked: #d80;
     --header-bg: #333;
     --nav-link-color: #6B0;
+    --nav-link-bg-color: #444;
     --content-border-color: #5ac;
     /*stolen from code theme*/
     --blockquote-bg: rgb(29, 31, 33);
@@ -47,6 +48,7 @@
     /*#841163
      * #115e84*/
     --nav-link-color: #118411;
+    --nav-link-bg-color: #bbb;
     --content-border-color: #026;
     --blockquote-bg: #fff;
 }
@@ -65,6 +67,7 @@ body {
 }
 .nav-link {
     color: var(--nav-link-color) !important;
+    background-color: var(--nav-link-bg-color);
 }
 
 a {
diff --git a/static/css/layout.css b/static/css/layout.css
index 181690c..bcdddac 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -1,6 +1,7 @@
 @layer pre-load, baseline, print;
 
 @layer baseline {
+
 body {
     padding: 0px;
     margin: 0px;
@@ -17,21 +18,45 @@ a:hover {
     text-decoration: underline;
 }
 
+.nav-link{
+    font-size: 3vh;
+    padding: 0em 0.25em;
+    border-radius: 0.5rem;
+}
+
+h1 {
+  font-size:3vh;
+}
+h2 {
+  font-size: 2.4vh;
+}
+p{
+  font-size: 1.75vh;
+}
+a {
+    font-size: 1.75vh;
+}
+.info {
+    font-size: 1.75vh;
+}
+
+
 #header {
     box-sizing: border-box;
     display: flex;
     flex-flow: row nowrap;
-    gap: 1em;
+    gap: 0.5em;
     align-items: center;
     width: 100%;
     font-size: 24px;
     padding: 0.5em 1em;
-    position: fixed;
+    /*was a fun experiment but this just causes issues*/
+    /*position: fixed;*/
 }
 #content {
     box-sizing: border-box;
     display: block flex;
-    margin: calc(24px + 3rem) 1rem 1rem 1rem;
+    margin: 1rem;/*calc(24px + 3rem) 1rem 1rem 1rem;*/
     padding: 1rem;
     /* needed due to flex parent*/
     width: 100%;
diff --git a/templates/default.html b/templates/default.html
index 35fad5c..677cd56 100644
--- a/templates/default.html
+++ b/templates/default.html
@@ -21,8 +21,7 @@
     </div>
     <div id="content-outer">
         <div id="content">
-            <h1
-                style="font-variant: small-caps;text-align: justify; -moz-text-align-last: center; text-align-last: center;">
+            <h1 style="font-variant: small-caps;">
                 {{{title}}}</h1>
             {{{content}}}
         </div>