--- a/mrjunejune/pages/base.css	Thu Jan 01 05:57:03 2026 -0800
+++ b/mrjunejune/pages/base.css	Thu Jan 01 08:23:46 2026 -0800
@@ -60,14 +60,12 @@
   src: url("/fonts/atkinson-regular.woff") format("woff");
   font-weight: 400;
   font-style: normal;
-  font-display: swap;
 }
 @font-face {
   font-family: "Atkinson";
   src: url("/fonts/atkinson-bold.woff") format("woff");
   font-weight: 700;
   font-style: normal;
-  font-display: swap;
 }
 /* Fonts */
 @font-face {
@@ -98,6 +96,7 @@
   font-size: 20px;
   line-height: 1.7;
 }
+
 main {
   background: var(--white);
   width: var(--main-width);
@@ -105,6 +104,7 @@
   margin: auto;
   padding: 1em 1em;
 }
+
 h1,
 h2,
 h3,
@@ -257,3 +257,38 @@
   transform: scale(1.1);
   box-shadow: 0 4px 12px rgba(0,0,0,0.3);
 }
+
+a {
+  text-decoration: underline;
+}
+
+a::before {
+  content: "";
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-right: 8px;
+  vertical-align: middle;
+
+  /* This treats the paw like a stencil */
+  background-color: #FF69B4; /* Change your color here! (e.g., Hot Pink) */
+  -webkit-mask: url('/public/paw.svg') no-repeat center;
+  mask: url('/public/paw.svg') no-repeat center;
+  
+  /* Your 2D Animation */
+  animation: pawStep 0.6s ease-out forwards;
+}
+
+@keyframes pawStep {
+  0% { transform: scale(0); opacity: 0; }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+a:hover::before {
+  animation: wiggle 0.4s ease-in-out infinite;
+}
+
+@keyframes wiggle {
+  0%, 100% { transform: rotate(-15deg); }
+  50% { transform: rotate(15deg); }
+}