style and padding adjustments. Updated a link.

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

@@ -11,10 +11,13 @@
 
   --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);
@@ -60,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);
 }
 
@@ -71,6 +75,7 @@ div.card {
   }
 }
 
+details,
 h1,
 h2,
 h3,
@@ -81,16 +86,30 @@ 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)) {
+  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;