another tiny style change

index.html

@@ -115,7 +115,7 @@
       </p>
       <p>
         <img src="/assets/neofox_floof.png" alt="Neofox" height="32" width="32" style="vertical-align: bottom;"> ← <a
-          href="https://vulpecula.zone">My favourite foxie &lt;3 </a>
+          href="https://tasiaiso.vulpecula.zone">My favourite foxie &lt;3 </a>
       </p>
     </div>
     <div class="card">

styles/styles.css

@@ -4,16 +4,20 @@
   --background: light-dark(hsl(var(--hue), 100%, 97%), hsl(var(--hue), 40%, 6.5%));
   /* used for badges ↓ */
   --background-alt: light-dark(hsl(var(--hue), 75%, 88%), hsl(var(--hue), 20%, 20%));
+  --background-transparent: light-dark(hsla(var(--hue), 75%, 88%, 50%), hsla(var(--hue), 20%, 20%, 50%));
   --foreground: light-dark(hsl(var(--hue), 100%, 25%), hsl(var(--hue), 100%, 90%));
   /* Used for links ↓ */
   --foreground-alt: light-dark(hsl(var(--hue), 100%, 35%), hsl(var(--hue), 65%, 70%));
 
   --rounding: 16px;
   --rounding-big: calc(var(--rounding) * 2);
+  --rounding-small: calc(var(--rounding) / 2);
+  --rounding-verysmall: calc(var(--rounding) / 12);
 
   --spacing-base-val: 4px;
   --spacing: calc(var(--spacing-base-val) * 2);
   --spacing-large: calc(var(--spacing-base-val) * 4);
+  --spacing-extralarge: calc(var(--spacing-base-val) * 8);
   --spacing-small: calc(var(--spacing-base-val) / 1.5);
 
   background-color: var(--background);
@@ -21,6 +25,7 @@
   background-size: cover;
   background-repeat: none;
   background-attachment: fixed;
+  box-shadow: inset 0 0 0 100vw var(--background-transparent);
   color: var(--foreground);
   font-family: InterVariable, Inter, system-ui;
   font-feature-settings:
@@ -58,7 +63,8 @@ div.card {
   margin-block: var(--spacing);
   width: max(fit-content, 800px);
   max-width: 800px;
-  padding: var(--spacing-large);
+  padding-block: var(--spacing-large);
+  padding-inline: var(--spacing-extralarge);
   border-radius: var(--rounding);
 }
 
@@ -69,6 +75,7 @@ div.card {
   }
 }
 
+details,
 h1,
 h2,
 h3,
@@ -79,16 +86,31 @@ p {
   margin-block: var(--spacing-large);
 }
 
+ul {
+  /* Whoops. */
+  padding-left: calc(var(--spacing-large) + 2px);
+}
+
 hr {
   border-color: var(--foreground);
   margin-block: var(--spacing);
 }
 
+a:hover:not(:has(img)), a:visited:hover:not(:has(img)),
+a:active:not(:has(img)), a:visited:active:not(:has(img)) {
+  box-sizing: border-box;
+  background-color: var(--foreground);
+  box-shadow: 0px 0px 0px 5px var(--foreground);
+  color: var(--background);
+}
+
 a,
 a:visited {
   color: var(--foreground-alt);
+  border-radius: var(--rounding-verysmall);
 }
 
+
 code {
   font-size: inherit;
   font-family: monospace;