yeah whetever

3 files changed, 69 insertions, 10 deletions

diff --git a/README.md b/README.md
index 1a844fe..fd20c35 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@ A collection of cute & creative web experiments and visual experiences.
 ## 🌈 Experiments
 
 - [Isometric Triangles](/isometric/index.html) - Dynamic background with animated geometric shapes in an isometric perspective.
-- [Lemmings](/lemmings/index.html) - Cute pixelated lemmings walking and falling in a dynamic environment.
+- [Lemmings](/lemmings/index.html) - Cute green & blue lemmings walking and falling in a dynamic pixelated environment.
 
 ## 🚀 Local Development
 
diff --git a/index.html b/index.html
index 80b8f89..945dae0 100644
--- a/index.html
+++ b/index.html
@@ -122,7 +122,7 @@
             <a href="lemmings/index.html" class="experiment-card">
                 <div class="experiment-title">Lemmings</div>
                 <div class="experiment-description">
-                    Cute pixelated lemmings walking and falling in a dynamic environment.
+                    Cute green & blue lemmings walking and falling in a dynamic pixelated environment.
                 </div>
             </a>
         </div>
diff --git a/lemmings/index.html b/lemmings/index.html
index 6a32c5e..f9e9cf4 100644
--- a/lemmings/index.html
+++ b/lemmings/index.html
@@ -50,29 +50,42 @@
             position: absolute;
             width: 20px;
             height: 30px;
-            background-color: #ffd6e0;
+            background-color: #5b9bd5; /* Blue body */
             border-radius: 10px 10px 0 0;
             z-index: 10;
             image-rendering: pixelated;
         }
 
+        /* Add a tail */
+        .lemming::after {
+            content: '';
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            background-color: #5b9bd5; /* Blue tail to match body */
+            border-radius: 0 0 50% 50%;
+            bottom: -6px;
+            left: 6px;
+            z-index: -1;
+        }
+
         .lemming::before {
             content: '';
             position: absolute;
             width: 16px;
             height: 16px;
-            background-color: #ffd6e0;
+            background-color: #70ad47; /* Green head */
             border-radius: 50%;
             top: -10px;
             left: 2px;
         }
 
-        .lemming::after {
-            content: '';
+        /* Move eye to be a separate element since we used ::after for the tail */
+        .lemming .eye {
             position: absolute;
             width: 4px;
             height: 4px;
-            background-color: #5a3d5c;
+            background-color: #000000; /* Black eye */
             border-radius: 50%;
             top: -5px;
             left: 8px;
@@ -82,16 +95,35 @@
             position: absolute;
             width: 10px;
             height: 5px;
-            background-color: #5a3d5c;
+            background-color: #4a7a31; /* Darker green hair */
             top: -15px;
             left: 5px;
         }
+        
+        /* Add whiskers */
+        .lemming .whisker {
+            position: absolute;
+            height: 1px;
+            width: 6px;
+            background-color: #ffffff;
+            top: -2px;
+        }
+        
+        .lemming .whisker.left {
+            left: -4px;
+            transform: rotate(-15deg);
+        }
+        
+        .lemming .whisker.right {
+            right: -4px;
+            transform: rotate(15deg);
+        }
 
         .lemming .arm {
             position: absolute;
             width: 8px;
             height: 12px;
-            background-color: #ffd6e0;
+            background-color: #5b9bd5;
             border-radius: 4px;
         }
 
@@ -111,7 +143,7 @@
             position: absolute;
             width: 8px;
             height: 12px;
-            background-color: #ffd6e0;
+            background-color: #5b9bd5;
             border-radius: 4px;
             bottom: -10px;
         }
@@ -211,6 +243,19 @@
             text-shadow: 3px 3px 0px rgba(255, 110, 196, 0.5);
             z-index: 100;
         }
+        
+        .subtitle {
+            position: absolute;
+            top: 60px;
+            left: 0;
+            right: 0;
+            text-align: center;
+            font-family: 'VT323', monospace;
+            font-size: 1.5rem;
+            color: #5a3d5c;
+            text-shadow: 3px 3px 0px rgba(255, 110, 196, 0.5);
+            z-index: 100;
+        }
     </style>
 </head>
 
@@ -218,6 +263,7 @@
     <div class="game-container">
         <a href="../index.html" class="back-link">Back to Home</a>
         <h1 class="title">Lemmings</h1>
+        <p class="subtitle">Watch these cute green & blue lemmings explore their world!</p>
         <div class="ground"></div>
     </div>
 
@@ -296,6 +342,19 @@
                 rightLeg.className = 'leg right';
                 lemming.appendChild(rightLeg);
 
+                const eye = document.createElement('div');
+                eye.className = 'eye';
+                lemming.appendChild(eye);
+                
+                // Add whiskers
+                const leftWhisker = document.createElement('div');
+                leftWhisker.className = 'whisker left';
+                lemming.appendChild(leftWhisker);
+                
+                const rightWhisker = document.createElement('div');
+                rightWhisker.className = 'whisker right';
+                lemming.appendChild(rightWhisker);
+
                 // Random starting position
                 const startPlatformIndex = Math.floor(Math.random() * platforms.length);
                 const startPlatform = platforms[startPlatformIndex];