i dont want it to be called 'quantum' rabbit hole just rabbithole. i want the theme to be alot less dark at first but not over bearing, i want it to clearly say what the site is and the rabbit hole is and what swiping either direction does, also i want to do a little animated gilf between the swipes were an animated rabbit does something interesting/clever/cute kinda thing. that way it will be fast too to let the rest of the stuff load

components/auth-modal.js

@@ -39,19 +39,17 @@ class AuthModal extends HTMLElement {
           text-align: center;
           margin-bottom: 2rem;
         }
-        
         .modal-title {
-          color: var(--quantum-accent);
+          color: var(--rabbithole-accent);
           font-size: 1.5rem;
           margin: 0 0 0.5rem 0;
         }
         
         .modal-subtitle {
-          color: var(--quantum-muted);
+          color: var(--rabbithole-muted);
           font-size: 0.9rem;
         }
-        
-        .form-actions {
+.form-actions {
           display: flex;
           gap: 1rem;
           justify-content: space-between;
@@ -91,30 +89,28 @@ class AuthModal extends HTMLElement {
           gap: 1rem;
           margin-bottom: 1.5rem;
         }
-        
         .auth-provider-btn {
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 0.75rem;
           padding: 1rem;
-          border: 2px solid rgba(79, 209, 197, 0.3);
+          border: 2px solid rgba(59, 130, 246, 0.3);
           border-radius: 0.75rem;
-          background: rgba(14, 15, 17, 0.8);
-          color: var(--quantum-fg);
+          background: rgba(255, 255, 255, 0.8);
+          color: var(--rabbithole-fg);
           font-size: 1rem;
           font-weight: 500;
           cursor: pointer;
-          transition: all 0.3s var(--quantum-easing);
+          transition: all 0.3s var(--rabbithole-easing);
         }
         
         .auth-provider-btn:hover {
-          border-color: var(--quantum-accent);
+          border-color: var(--rabbithole-accent);
           transform: translateY(-2px);
-          box-shadow: 0 0 20px var(--quantum-glow);
+          box-shadow: 0 0 20px var(--rabbithole-glow);
         }
-        
-        .provider-icon {
+.provider-icon {
           width: 24px;
           height: 24px;
         }

components/history-modal.js

@@ -63,33 +63,31 @@ class HistoryModal extends HTMLElement {
           flex-direction: column;
           gap: 0.5rem;
         }
-        
         .history-item {
-          background: rgba(14, 15, 17, 0.5);
+          background: rgba(248, 250, 252, 0.8);
           padding: 1rem;
           border-radius: 0.5rem;
-          border-left: 3px solid var(--quantum-accent);
+          border-left: 3px solid var(--rabbithole-accent);
           cursor: pointer;
           transition: all 0.3s;
         }
         
         .history-item:hover {
-          background: rgba(79, 209, 197, 0.1);
+          background: rgba(59, 130, 246, 0.1);
           transform: translateX(5px);
         }
         
         .history-title {
-          color: var(--quantum-fg);
+          color: var(--rabbithole-fg);
           margin: 0 0 0.5rem 0;
           font-size: 1rem;
         }
         
         .history-date {
-          color: var(--quantum-muted);
+          color: var(--rabbithole-muted);
           font-size: 0.8rem;
         }
-        
-        .empty-state {
+.empty-state {
           text-align: center;
           color: var(--quantum-muted);
           padding: 2rem;

components/user-profile.js

@@ -25,41 +25,40 @@ class UserProfile extends HTMLElement {
           right: 1rem;
           z-index: 100;
         }
-        
         .profile-btn {
           width: 48px;
           height: 48px;
           border-radius: 50%;
-          background: var(--quantum-accent);
+          background: var(--rabbithole-accent);
           border: none;
-          color: var(--quantum-bg);
+          color: white;
           font-weight: bold;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
-          transition: all 0.3s var(--quantum-easing);
+          transition: all 0.3s var(--rabbithole-easing);
         }
         
         .profile-btn:hover {
           transform: scale(1.1);
-          box-shadow: 0 0 20px var(--quantum-glow);
+          box-shadow: 0 0 20px var(--rabbithole-glow);
         }
         
         .profile-menu {
           position: absolute;
           top: 100%;
           right: 0;
-          background: #1a1c20;
-          border: 2px solid var(--quantum-accent);
+          background: white;
+          border: 2px solid var(--rabbithole-accent);
           border-radius: 0.75rem;
           padding: 1rem;
           margin-top: 0.5rem;
           min-width: 200px;
           display: none;
+          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
         }
-        
-        .profile-menu.show {
+.profile-menu.show {
           display: block;
           animation: slideDown 0.3s var(--quantum-easing);
         }
@@ -89,15 +88,14 @@ class UserProfile extends HTMLElement {
           font-weight: bold;
           margin: 0 auto 0.5rem;
         }
-        
         .user-name {
-          color: var(--quantum-fg);
+          color: var(--rabbithole-fg);
           margin: 0;
           font-size: 1rem;
         }
         
         .user-email {
-          color: var(--quantum-muted);
+          color: var(--rabbithole-muted);
           font-size: 0.8rem;
           margin: 0.25rem 0 0 0;
         }
@@ -108,7 +106,7 @@ class UserProfile extends HTMLElement {
           padding: 0.75rem;
           border: none;
           background: transparent;
-          color: var(--quantum-fg);
+          color: var(--rabbithole-fg);
           text-align: left;
           cursor: pointer;
           border-radius: 0.5rem;
@@ -116,14 +114,14 @@ class UserProfile extends HTMLElement {
         }
         
         .menu-item:hover {
-          background: rgba(79, 209, 197, 0.1);
+          background: rgba(59, 130, 246, 0.1);
         }
         
         .logout-btn {
-          color: #ff6b6b;
+          color: #ef4444;
           margin-top: 0.5rem;
         }
-      </style>
+</style>
       
       <div class="profile-container">
         <button class="profile-btn" id="profile-toggle">

index.html

@@ -6,12 +6,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
   <meta name="theme-color" content="#0e0f11">
   <meta name="description" content="QuantumRabbitHole Explorer: Dive into the infinite knowledge universe with our cutting-edge, mobile-first Wikipedia exploration experience">
-  <title>QuantumRabbitHole Explorer 🐇</title>
-
-  <!-- QuantumRabbitHole: Next-gen client-only, Wikipedia-powered, immersive knowledge exploration -->
-  <!-- Quantum-optimized for seamless mobile-first experience -->
-
-  <link rel="stylesheet" href="style.css">
+  <title>RabbitHole Explorer 🐇</title>
+  <!-- RabbitHole: Client-only Wikipedia-powered knowledge exploration -->
+  <!-- Mobile-first immersive browsing experience -->
+<link rel="stylesheet" href="style.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@@ -38,59 +36,68 @@
 <body>
 
   <user-profile></user-profile>
-  
-  <div class="quantum-gradient"></div>
+  <div class="rabbithole-gradient"></div>
   <div class="particles-container" id="particles"></div>
-<article class="quantum-card" id="card" data-state="welcome">
-    <div class="quantum-header">
-      <h1 id="title">Welcome to QuantumRabbitHole Explorer 🐇</h1>
-      <div class="quantum-progress" id="progress">
+  <div class="rabbit-animation" id="rabbit-animation" style="display: none;">
+    <div class="rabbit">🐇</div>
+  </div>
+<article class="rabbithole-card" id="card" data-state="welcome">
+    <div class="rabbithole-header">
+      <h1 id="title">Welcome to RabbitHole Explorer 🐇</h1>
+      <div class="rabbithole-progress" id="progress">
         <div class="progress-bar" id="progress-bar"></div>
       </div>
     </div>
     
-    <div class="quantum-content">
-      <p id="extract">Experience the future of knowledge discovery. Our quantum-inspired algorithm connects you to the most fascinating corners of human knowledge through an immersive, gesture-based interface.</p>
-      <div class="quantum-meta" id="meta">
+    <div class="rabbithole-content">
+      <p id="extract">Discover Wikipedia articles through an intuitive swipe-based interface. Dive deeper into topics by swiping right, or jump to random articles by swiping left.</p>
+      <div class="rabbithole-guide">
+        <div class="guide-item">
+          <span class="guide-icon">👉</span>
+          <span>Swipe right → follow links to related articles</span>
+        </div>
+        <div class="guide-item">
+          <span class="guide-icon">👈</span>
+          <span>Swipe left ← jump to random articles</span>
+        </div>
+        <div class="guide-item">
+          <span class="guide-icon">👆</span>
+          <span>Tap to explore more options</span>
+        </div>
+      </div>
+      <div class="rabbithole-meta" id="meta">
         <span class="meta-tag">🔒 Zero Tracking</span>
         <span class="meta-tag">🚀 Instant Loading</span>
         <span class="meta-tag">📱 Mobile-First</span>
-        <span class="meta-tag">🌐 Client-Side</span>
       </div>
-      <div class="quantum-error" id="error"></div>
+      <div class="rabbithole-error" id="error"></div>
     </div>
 
-    <div class="quantum-actions">
-      <button id="enter" class="quantum-btn quantum-btn-primary">
-        <span class="btn-content">Launch Quantum Explorer</span>
-        <div class="quantum-sparkle"></div>
+    <div class="rabbithole-actions">
+      <button id="enter" class="rabbithole-btn rabbithole-btn-primary">
+        <span class="btn-content">Start Exploring</span>
+        <div class="rabbithole-sparkle"></div>
       </button>
-      <a href="#share" class="quantum-btn quantum-btn-secondary" id="share-btn">
+      <a href="#share" class="rabbithole-btn rabbithole-btn-secondary" id="share-btn">
         Share Experience
       </a>
     </div>
   </article>
-
-  <div class="quantum-nav-arrows" aria-hidden="true">
-    <div class="quantum-arrow quantum-arrow-left" id="arrow-left">
+  <div class="rabbithole-nav-arrows" aria-hidden="true">
+    <div class="rabbithole-arrow rabbithole-arrow-left" id="arrow-left">
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
         <path d="M19 12H5M12 19l-7-7 7-7"/>
       </svg>
     </div>
-    <div class="quantum-arrow quantum-arrow-right" id="arrow-right">
+    <div class="rabbithole-arrow rabbithole-arrow-right" id="arrow-right">
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
         <path d="M5 12h14M12 5l7 7-7 7"/>
       </svg>
     </div>
   </div>
 
-  <div class="quantum-hint">
-    <span class="hint-icon">👆</span>
-    <span>Swipe → dive deeper · Swipe ← quantum jump · Tap to explore</span>
-  </div>
-
-  <div class="quantum-footer">
-    <span>Powered by Wikipedia API · Built with Quantum Technology</span>
+  <div class="rabbithole-footer">
+    <span>Powered by Wikipedia API · Built for curious minds</span>
   </div>
 <script>
     const titleEl = document.getElementById('title');

script.js

@@ -1,6 +1,6 @@
 
-class QuantumRabbitHole {
-    constructor() {
+class RabbitHole {
+constructor() {
         this.titleEl = document.getElementById('title');
         this.extractEl = document.getElementById('extract');
         this.metaEl = document.getElementById('meta');
@@ -102,11 +102,11 @@ createParticles() {
     clearError() {
         this.errorEl.textContent = '';
     }
-
     async fetchRandomArticle() {
         try {
             this.setLoading(true);
             this.clearError();
+            this.showRabbitAnimation();
             const res = await fetch(
                 'https://en.wikipedia.org/w/api.php?action=query&format=json&origin=*&generator=random&grnnamespace=0&prop=extracts|description|info&exintro=1&explaintext=1&inprop=url'
             );
@@ -117,7 +117,7 @@ createParticles() {
             this.addToHistory(page);
             this.animateContent('slide-in-left');
         } catch (e) {
-            this.showError('Quantum connection unstable. Try again.');
+            this.showError('Connection unstable. Try again.');
         } finally {
             this.setLoading(false);
         }
@@ -129,6 +129,7 @@ createParticles() {
         try {
             this.setLoading(true);
             this.clearError();
+            this.showRabbitAnimation();
             const res = await fetch(
                 `https://en.wikipedia.org/w/api.php?action=query&format=json&origin=*&titles=${encodeURIComponent(next)}&prop=extracts|description|info&exintro=1&explaintext=1&inprop=url`
             );
@@ -139,13 +140,12 @@ createParticles() {
             this.addToHistory(page);
             this.animateContent('slide-in-right');
         } catch (e) {
-            this.showError('Quantum tunnel collapsed. Try again.');
+            this.showError('Failed to follow link. Try again.');
         } finally {
             this.setLoading(false);
         }
     }
-
-    async fetchLinks(title) {
+async fetchLinks(title) {
         try {
             const url = `https://en.wikipedia.org/w/api.php?action=query&format=json&origin=*&prop=links&pllimit=50&titles=${encodeURIComponent(title)}`;
             const res = await fetch(url);
@@ -232,6 +232,16 @@ updateProgress() {
             }, 2000);
         }
     }
+
+    showRabbitAnimation() {
+        const rabbitAnim = document.getElementById('rabbit-animation');
+        rabbitAnim.style.display = 'block';
+        
+        // Remove the animation after it completes
+        setTimeout(() => {
+            rabbitAnim.style.display = 'none';
+        }, 800);
+    }
 handleArrowRight() {
         if (!this.started) this.startExperience();
         else this.fetchLinkedArticle();
@@ -366,7 +376,7 @@ document.addEventListener('DOMContentLoaded', () => {
         quantumApp.showError('Logged out successfully');
     });
 });
-// Initialize the quantum experience
+// Initialize the rabbit hole experience
 document.addEventListener('DOMContentLoaded', () => {
-    new QuantumRabbitHole();
-});
+    new RabbitHole();
+});

style.css

@@ -1,14 +1,14 @@
+
 :root {
-  --quantum-bg: #0e0f11;
-  --quantum-fg: #e7e7e7;
-  --quantum-muted: #9aa0a6;
-  --quantum-accent: #4fd1c5;
-  --quantum-glow: #4fd1c540;
-  --quantum-pulse: #4fd1c520;
-  --quantum-easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --quantum-duration: 0.3s;
+  --rabbithole-bg: #f8fafc;
+  --rabbithole-fg: #1e293b;
+  --rabbithole-muted: #64748b;
+  --rabbithole-accent: #3b82f6;
+  --rabbithole-glow: #3b82f640;
+  --rabbithole-pulse: #3b82f620;
+  --rabbithole-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --rabbithole-duration: 0.3s;
 }
-
 * { 
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
@@ -25,24 +25,23 @@ html, body {
   font-weight: 400;
   line-height: 1.6;
 }
-
 body {
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
+  background: var(--rabbithole-bg);
 }
 
-.quantum-gradient {
+.rabbithole-gradient {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background: radial-gradient(circle at 50% 50%, #1a1c20 0%, var(--quantum-bg) 70%);
+  background: radial-gradient(circle at 50% 50%, #e2e8f0 0%, var(--rabbithole-bg) 70%);
   z-index: -2;
 }
-
 .particles-container {
   position: fixed;
   top: 0;
@@ -52,15 +51,35 @@ body {
   z-index: -1;
   pointer-events: none;
 }
-
 .particle {
   position: absolute;
-  background: var(--quantum-accent);
+  background: var(--rabbithole-accent);
   border-radius: 50%;
-  opacity: 0.3;
+  opacity: 0.2;
   animation: float 20s infinite linear;
 }
 
+.rabbit-animation {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 999;
+  pointer-events: none;
+}
+
+.rabbit {
+  font-size: 4rem;
+  animation: hop 0.8s ease-in-out;
+}
+
+@keyframes hop {
+  0% { transform: translateY(0) rotate(0deg); }
+  25% { transform: translateY(-30px) rotate(-5deg); }
+  50% { transform: translateY(-60px) rotate(0deg); }
+  75% { transform: translateY(-30px) rotate(5deg); }
+  100% { transform: translateY(0) rotate(0deg); }
+}
 @keyframes float {
   0% { transform: translateY(0) translateX(0); }
   25% { transform: translateY(-20px) translateX(10px); }
@@ -68,8 +87,7 @@ body {
   75% { transform: translateY(-20px) translateX(-10px); }
   100% { transform: translateY(0) translateX(0); }
 }
-
-.quantum-card {
+.rabbithole-card {
   width: 100vw;
   height: 100vh;
   padding: env(safe-area-inset-top) 1.5rem env(safe-area-inset-bottom) 1.5rem;
@@ -82,39 +100,63 @@ body {
   z-index: 1;
   max-width: 600px;
   margin: 0 auto;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 1rem;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
 }
 
-.quantum-header {
+.rabbithole-header {
   text-align: center;
 }
 
-.quantum-progress {
+.rabbithole-progress {
   width: 100%;
   height: 2px;
-  background: rgba(255,255,255,0.1);
+  background: rgba(0,0,0,0.1);
   border-radius: 1px;
   margin: 1rem 0;
   overflow: hidden;
 }
-
 .progress-bar {
   height: 100%;
-  background: var(--quantum-accent);
+  background: var(--rabbithole-accent);
   width: 0%;
-  transition: width 0.3s var(--quantum-easing);
+  transition: width 0.3s var(--rabbithole-easing);
   border-radius: 1px;
 }
 
-.quantum-content {
+.rabbithole-content {
   text-align: center;
 }
 
+.rabbithole-guide {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin: 1.5rem 0;
+}
+
+.guide-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: rgba(59, 130, 246, 0.05);
+  border-radius: 0.5rem;
+  font-size: 0.9rem;
+  color: var(--rabbithole-fg);
+}
+
+.guide-icon {
+  font-size: 1.2rem;
+}
 h1 {
   font-size: 2rem;
   margin: 0;
   letter-spacing: -0.02em;
   font-weight: 700;
-  background: linear-gradient(135deg, var(--quantum-accent), #81e6d9);
+  background: linear-gradient(135deg, var(--rabbithole-accent), #60a5fa);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -124,12 +166,12 @@ h1 {
 p {
   margin: 0;
   line-height: 1.6;
-  color: var(--quantum-muted);
+  color: var(--rabbithole-fg);
   font-size: 1.1rem;
-  font-weight: 300;
+  font-weight: 400;
 }
 
-.quantum-meta {
+.rabbithole-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
@@ -138,22 +180,22 @@ p {
 }
 
 .meta-tag {
-  background: rgba(79, 209, 197, 0.1);
+  background: rgba(59, 130, 246, 0.1);
   padding: 0.25rem 0.75rem;
   border-radius: 1rem;
   font-size: 0.8rem;
-  color: var(--quantum-accent);
-  border: 1px solid var(--quantum-glow);
+  color: var(--rabbithole-accent);
+  border: 1px solid var(--rabbithole-glow);
 }
 
-.quantum-error {
-  color: #ff6b6b;
+.rabbithole-error {
+  color: #ef4444;
   font-size: 0.9rem;
   margin-top: 1rem;
   font-weight: 400;
 }
 
-.quantum-actions {
+.rabbithole-actions {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -161,42 +203,42 @@ p {
   align-items: center;
 }
 
-.quantum-btn {
+.rabbithole-btn {
   position: relative;
   background: transparent;
-  color: var(--quantum-accent);
-  border: 2px solid var(--quantum-accent);
+  color: var(--rabbithole-accent);
+  border: 2px solid var(--rabbithole-accent);
   padding: 1rem 2rem;
   border-radius: 0.75rem;
   font-size: 1rem;
   text-decoration: none;
   font-weight: 500;
-  transition: all 0.3s var(--quantum-easing);
+  transition: all 0.3s var(--rabbithole-easing);
   overflow: hidden;
   min-width: 200px;
   text-align: center;
 }
 
-.quantum-btn-primary {
-  background: var(--quantum-pulse);
-  box-shadow: 0 0 20px var(--quantum-glow);
+.rabbithole-btn-primary {
+  background: var(--rabbithole-pulse);
+  box-shadow: 0 0 20px var(--rabbithole-glow);
 }
 
-.quantum-btn-primary:hover {
+.rabbithole-btn-primary:hover {
   transform: translateY(-2px);
-  box-shadow: 0 0 30px var(--quantum-glow);
+  box-shadow: 0 0 30px var(--rabbithole-glow);
 }
 
-.quantum-btn-secondary {
+.rabbithole-btn-secondary {
   opacity: 0.8;
 }
 
-.quantum-btn-secondary:hover {
+.rabbithole-btn-secondary:hover {
   opacity: 1;
   transform: translateY(-1px);
 }
 
-.quantum-sparkle {
+.rabbithole-sparkle {
   position: absolute;
   top: 0;
   left: 0;
@@ -207,11 +249,11 @@ p {
   transition: opacity 0.3s;
 }
 
-.quantum-btn:hover .quantum-sparkle {
+.rabbithole-btn:hover .rabbithole-sparkle {
   opacity: 1;
 }
 
-.quantum-nav-arrows {
+.rabbithole-nav-arrows {
   position: fixed;
   top: 50%;
   left: 0;
@@ -224,62 +266,42 @@ p {
   z-index: 2;
 }
 
-.quantum-arrow {
+.rabbithole-arrow {
   pointer-events: auto;
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  border: 2px solid var(--quantum-accent);
-  color: var(--quantum-accent);
-  background: rgba(14, 15, 17, 0.9);
+  border: 2px solid var(--rabbithole-accent);
+  color: var(--rabbithole-accent);
+  background: rgba(255, 255, 255, 0.9);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   user-select: none;
-  transition: all 0.3s var(--quantum-easing);
+  transition: all 0.3s var(--rabbithole-easing);
   backdrop-filter: blur(10px);
   cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.quantum-arrow:hover {
+.rabbithole-arrow:hover {
   transform: scale(1.1);
-  box-shadow: 0 0 20px var(--quantum-glow);
+  box-shadow: 0 0 20px var(--rabbithole-glow);
 }
 
-.quantum-hint {
-  position: fixed;
-  bottom: calc(env(safe-area-inset-bottom) + 1rem);
-  left: 0;
-  right: 0;
-  text-align: center;
-  font-size: 0.8rem;
-  color: var(--quantum-muted);
-  opacity: 0.8;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  z-index: 2;
-}
-
-.hint-icon {
-  font-size: 1rem;
-}
-
-.quantum-footer {
+.rabbithole-footer {
   position: fixed;
   bottom: 0.5rem;
   left: 0;
   right: 0;
   text-align: center;
   font-size: 0.7rem;
-  color: var(--quantum-muted);
+  color: var(--rabbithole-muted);
   opacity: 0.6;
   padding-bottom: env(safe-area-inset-bottom);
   z-index: 2;
 }
-
 /* Mobile optimizations */
 @media (max-width: 768px) {
   .quantum-card {
@@ -337,7 +359,7 @@ p {
 }
 /* Animation classes */
 .fade-in {
-  animation: fadeIn 0.5s var(--quantum-easing);
+  animation: fadeIn 0.5s var(--rabbithole-easing);
 }
 
 @keyframes fadeIn {
@@ -346,7 +368,7 @@ p {
 }
 
 .slide-in-right {
-  animation: slideInRight 0.4s var(--quantum-easing);
+  animation: slideInRight 0.4s var(--rabbithole-easing);
 }
 
 @keyframes slideInRight {
@@ -355,7 +377,7 @@ p {
 }
 
 .slide-in-left {
-  animation: slideInLeft 0.4s var(--quantum-easing);
+  animation: slideInLeft 0.4s var(--rabbithole-easing);
 }
 
 @keyframes slideInLeft {
@@ -389,7 +411,7 @@ history-modal {
   width: 20px;
   height: 20px;
   margin: -10px 0 0 -10px;
-  border: 2px solid var(--quantum-accent);
+  border: 2px solid var(--rabbithole-accent);
   border-radius: 50%;
   border-top-color: transparent;
   animation: spin 1s linear infinite;
@@ -397,4 +419,4 @@ history-modal {
 
 @keyframes spin {
   to { transform: rotate(360deg); }
-}
+}