Very important changes.

index.php

@@ -86,16 +86,117 @@ $total = count($sites);
 $prev = $sites[($index - 1 + $total) % $total];
 $next = $sites[($index + 1) % $total];
 ?>
-<div class="webring" role="navigation" aria-label="Webring navigation">
+<div id="ring" role="navigation" aria-label="Webring navigation">
     <a href="https://<?= htmlspecialchars(
         $prev,
         ENT_QUOTES | ENT_SUBSTITUTE,
         "UTF-8",
     ) ?>" target="_top" rel="noopener noreferrer">&larr; PREV</a>
-    <span aria-hidden="true"> | </span>
+    <span aria-hidden="true" class="specialtxt">The Ringularity</span>
     <a href="https://<?= htmlspecialchars(
         $next,
         ENT_QUOTES | ENT_SUBSTITUTE,
         "UTF-8",
     ) ?>" target="_top" rel="noopener noreferrer">NEXT &rarr;</a>
 </div>
+
+<style>
+#ring {
+                border-radius: var(--brad);
+                background-color: var(--bg2);
+                color: var(--blue1);
+                transition: scale 0.2s linear;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                flex-wrap: nowrap;
+                height: 1em;
+                padding: 1em;
+                align-items: center;
+            }
+
+            #ring:hover a {
+                transition: transform 1.3s ease-in-out;
+                transform: scaleX(4) scaleY(1.5);
+                animation: wheee 0.2s linear infinite;
+                animation-delay: 1.3s;
+            }
+
+            #ring:hover .specialtxt {
+                font-weight: bold;
+                text-transform: uppercase;
+                position: relative;
+                animation: bob 1.8s infinite ease-in-out;
+                background: linear-gradient(
+                    90deg,
+                    var(--red1),
+                    var(--orange1),
+                    var(--yellow1)
+                );
+                -webkit-background-clip: text;
+                color: transparent;
+            }
+
+            #ring:hover .specialtxt::before,
+            #ring:hover .specialtxt::after {
+                content: "The Ringularity";
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: linear-gradient(
+                    90deg,
+                    var(--red0),
+                    var(--orange0),
+                    var(--yellow0)
+                );
+                -webkit-background-clip: text;
+                color: transparent;
+                z-index: -1;
+                transform: scaleY(1);
+                opacity: 0.5;
+                animation: smear 1.8s infinite ease-in-out;
+            }
+
+            #ring:hover .specialtxt::after {
+                filter: blur(8px);
+                opacity: 0.8;
+            }
+
+            @keyframes bob {
+                0%,
+                100% {
+                    transform: translateY(8px) scaleX(1.2) scaleY(0.8);
+                }
+                50% {
+                    transform: translateY(-8px) scaleX(0.8) scaleY(1.2);
+                }
+            }
+
+            @keyframes smear {
+                0%,
+                100%,
+                50% {
+                    transform: scaleY(1) translateY(0px);
+                    opacity: 0.5;
+                }
+                25% {
+                    transform: scaleY(1.5) translateY(2px);
+                    opacity: 0.7;
+                }
+                75% {
+                    transform: scaleY(1.5) translateY(-2px);
+                    opacity: 0.7;
+                }
+            }
+
+            @keyframes wheee {
+                from {
+                    transform: rotate(0deg) scaleX(4) scaleY(1.5);
+                }
+                to {
+                    transform: rotate(360deg) scaleX(4) scaleY(1.5);
+                }
+            }
+</style>