footnotes styling

_sass/_digital-garden.scss

@@ -95,6 +95,10 @@
     stroke-dasharray: 3;
     animation: dash 80s linear;
   }
+
+  &[long-form] {
+    fill: rgba(var(--active-note-rgb), 0.75);
+  }
 }
 
 .text text {
@@ -115,6 +119,7 @@
   }
 }
 
+
 .text [active] {
   fill: var(--active-note);
 }
@@ -213,6 +218,28 @@
   h4, h5, h6 {
     line-height: 1.25;
   }
+
+  .footnotes {
+    font-size: .875rem;
+  }
+
+  [role="doc-endnote"]:target {
+    font-weight: bold;
+    background: rgba(var(--internal-link-rgb), 0.25);
+  }
+
+  [role="doc-noteref"]{
+    &:target {
+      pointer-events: none;
+      margin-top: -200px; 
+      padding-top: 200px; 
+      display: inline-block;
+      font-weight: bold;
+    }
+    a {
+      pointer-events: auto;
+    }
+  }
 }
 
 // Link previews

_sass/_variables.scss

@@ -1,5 +1,6 @@
 :root {
   --active-note: #9e00ff;
+  --active-note-rgb: 158, 0, 255;
   --foreground-text: #f06e2f;
   --foreground-text-rgb: 240, 110, 47;
   --internal-link-rgb: 245, 164, 134;