Update index.html

index.html

@@ -4,12 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Loki.AI - By Parth Sadaria</title>
-  <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=Encode+Sans:[email protected]&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Protest+Revolution&display=swap" rel="stylesheet">
+    <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=Encode+Sans:[email protected]&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Protest+Revolution&display=swap" rel="stylesheet">
     <style>
         @font-face {
-          font-family: "Playfair Display";
+            font-family: "Playfair Display";
             font-weight: normal;
             font-style: normal;
         }
@@ -76,12 +76,14 @@
             opacity: 1;
         }
 
-        body:hover h1 {
+        body:hover h1,
+        body:hover p,
+        body:hover a {
             color: rgba(255, 255, 255, 1);
             text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
         }
 
-        body:hover p {
+        body:hover .playground-text {
             color: rgba(255, 255, 255, 0.7);
         }
 
@@ -102,6 +104,20 @@
             box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
         }
 
+        .playground-text {
+            font-size: 14px;
+            font-weight: bold;
+            display: inline-block;
+            margin-right: 5px;
+            transition: all 0.5s ease;
+        }
+
+        a {
+            color: white;
+            text-decoration: underline;
+            transition: all 0.5s ease;
+        }
+
         @media (max-width: 768px) {
             h1 {
                 letter-spacing: -1px;
@@ -116,22 +132,22 @@
     <div class="cursor"></div>
     <div class="glow"></div>
     <div class="container">
-<h1>Loki.AI</h1>
-<p>By Parth Sadaria</p>
-<br>
-<p style="font-size: 14px; font-weight: bold;">Playground:</p>
-<a href="https://parthsadaria-lokiai.hf.space/playground" target="_blank" rel="noopener noreferrer" style="color: white; text-decoration: underline;">https://parthsadaria-lokiai.hf.space/playground</a>
+        <h1>Loki.AI</h1>
+        <p>By Parth Sadaria</p>
+        <br>
+        <p class="playground-text">Playground:</p>
+        <a href="https://parthsadaria-lokiai.hf.space/playground" target="_blank" rel="noopener noreferrer">https://parthsadaria-lokiai.hf.space/playground</a>
     </div>
 
     <script>
         document.addEventListener('mousemove', (e) => {
             const cursor = document.querySelector('.cursor');
             const glow = document.querySelector('.glow');
-            
+
             // Move cursor
             cursor.style.left = e.clientX + 'px';
             cursor.style.top = e.clientY + 'px';
-            
+
             // Move glow effect
             glow.style.left = e.clientX + 'px';
             glow.style.top = e.clientY + 'px';