style fixes

base.css

@@ -11,7 +11,7 @@
         hsl(195deg, 100%, 67%),
         hsl(155deg, 70%,  62%)
       );
-  --size: 1.75rem;
+  --size: 15pt;
   --weight: 600;
   --link-color: hsl(196deg, 100%, 85%);
   --hover-color: hsl(50deg, 100%, 82%);
@@ -135,10 +135,12 @@ dd {
   content: var(--around-image);
 }
 
+rt::before { margin-left: -1.25em; }
+rt::after  { margin-right: -1.25em; }
 
 /* hacky fix for firefox mobile 68 freaking out at blend modes ☹ */
 @media (-moz-touch-enabled) {
-  body {
+  :root {
     background: var(--gradient) fixed;
     background-blend-mode: initial;
   }
@@ -164,7 +166,7 @@ dd {
 
 /* ~the "not actually supported by browsers yet" zone~ */
 @media (prefers-contrast: high), (prefers-color-scheme: dark) {
-  body {
+  :root {
     --gradient:
       linear-gradient(135deg,
           hsl(42deg,  56%, 55%),
@@ -179,26 +181,12 @@ dd {
       -webkit-image-set(url(media/bg_dim.png)    1x,
                         url(media/bg_2x_dim.png) 2x)
         top center fixed,
-      linear-gradient(135deg,
-          hsl(42deg,  56%, 55%),
-          hsl(348deg, 56%, 55%),
-          hsl(334deg, 60%, 43%),
-          hsl(234deg, 60%, 40%),
-          hsl(195deg, 60%, 44%),
-          hsl(155deg, 60%, 55%)
-        ) fixed;
+      var(--gradient) fixed;
     background:
       image-set(url(media/bg_dim.png)    1x,
                 url(media/bg_2x_dim.png) 2x)
         top center fixed,
-      linear-gradient(135deg,
-          hsl(42deg,  56%, 55%),
-          hsl(348deg, 56%, 55%),
-          hsl(334deg, 60%, 43%),
-          hsl(234deg, 60%, 40%),
-          hsl(195deg, 60%, 44%),
-          hsl(155deg, 60%, 55%)
-        ) fixed;
+      var(--gradient) fixed;
   }
 
   main {
@@ -216,7 +204,7 @@ dd {
 }
 
 @media (prefers-reduced-transparency) {
-  body {
+  :root {
     background: var(--gradient) fixed;
     background-blend-mode: initial;
   }

index.css

@@ -44,7 +44,6 @@ rt {
 }
 
 
-
 @media (hover) {
   [title] {
     text-decoration: dotted underline;
@@ -70,6 +69,9 @@ rt {
 rt { --around-image: url(media/star.svg); }
 h1, h2 { --around-image: url(media/sparkles.svg); }
 
+h1, h2, .ones { letter-spacing: 0.1ch; }
+.ones rt { letter-spacing: initial; }
+
 
 [href='#listen']::before {
   vertical-align: middle;
@@ -92,7 +94,7 @@ h1, h2 { --around-image: url(media/sparkles.svg); }
 #links ul {
   display: grid;
   grid-column-gap: 1em;
-  grid-template-columns: repeat(auto-fit, minmax(3em, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(4.5em, 1fr));
 
   max-width: 85%;
   margin: auto;