From d53e21b3bef9f60cdad8ab1d2a3b8f18269e71a2 Mon Sep 17 00:00:00 2001
From: asus <asus@example.com>
Date: Fri, 3 Nov 2023 12:00:10 +0100
Subject: [PATCH] use grid instead of flex for mouses animations

---
 index.html | 198 ++++++++++++++++++++++++++---------------------------
 style.css  |  36 ++++++----
 2 files changed, 120 insertions(+), 114 deletions(-)

diff --git a/index.html b/index.html
index df98af3..9f484ce 100644
--- a/index.html
+++ b/index.html
@@ -23,118 +23,117 @@
 </pre>
 
 <div class="mouse_container">
-
 <pre class="mouse f1">
-                 •      
-                  •     
-           ••     •     
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••     • 
-  •   •       •         
-  •   •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
+                 •     
+                  •    
+           ••     •    
+           • •     •   
+            •••••••••  
+              • •  ••  
+              •   • •  
+        ••••• •  •   • 
+       •     • ••     •
+  •   •       •        
+  •   •       ••       
+  •    •      • •      
+   •   ••    •         
+    •••  ••••          
 </pre>
 <pre class="mouse f2">
-                 •      
-                  •     
-           ••     •     
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••     • 
-   •  •       •         
-   •  •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
+                 •     
+                  •    
+           ••     •    
+           • •     •   
+            •••••••••  
+              • •  ••  
+              •   • •  
+        ••••• •  •   • 
+       •     • ••     •
+   •  •       •        
+   •  •       ••       
+  •    •      • •      
+   •   ••    •         
+    •••  ••••          
 </pre>
 <pre class="mouse f3">
-                  •     
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
-      •       •         
-   •• •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
+                  •   
+                  •   
+           ••      •  
+           • •     •  
+            ••••••••• 
+              • •  •• 
+              •   • • 
+        ••••• •  •   •
+       •     • ••    •
+      •       •       
+   •• •       ••      
+  •    •      • •     
+   •   ••    •        
+    •••  ••••         
 </pre>
 <pre class="mouse f4">
-                   •    
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
-    • •       •         
-   •  •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
+                   •  
+                  •   
+           ••      •  
+           • •     •  
+            ••••••••• 
+              • •  •• 
+              •   • • 
+        ••••• •  •   •
+       •     • ••    •
+    • •       •       
+   •  •       ••      
+  •    •      • •     
+   •   ••    •        
+    •••  ••••         
 </pre>
 <pre class="mouse f5">
-                   •    
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
-   •  •       •         
-  •   •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
+                   •  
+                  •   
+           ••      •  
+           • •     •  
+            ••••••••• 
+              • •  •• 
+              •   • • 
+        ••••• •  •   •
+       •     • ••    •
+   •  •       •       
+  •   •       ••      
+  •    •      • •     
+   •   ••    •        
+    •••  ••••         
 </pre>
 <pre class="mouse f6">
-                   •    
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
- •    •       •         
-  •   •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
+                   •  
+                  •   
+           ••      •  
+           • •     •  
+            ••••••••• 
+              • •  •• 
+              •   • • 
+        ••••• •  •   •
+       •     • ••    •
+ •    •       •       
+  •   •       ••      
+  •    •      • •     
+   •   ••    •        
+    •••  ••••         
 </pre>
 <pre class="mouse f7">
-                   •    
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
-•     •       •         
- •    •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
+                   •  
+                  •   
+           ••      •  
+           • •     •  
+            ••••••••• 
+              • •  •• 
+              •   • • 
+        ••••• •  •   •
+       •     • ••    •
+•     •       •       
+ •    •       ••      
+  •    •      • •     
+   •   ••    •        
+    •••  ••••         
 </pre>
 <pre class="mouse f8">
                 ••        
@@ -179,7 +178,6 @@
    •   ••    •         •  
     •••  ••••             
 </pre>
-
 </div>
 <!--
                 •                      -                          
diff --git a/style.css b/style.css
index b7524d0..b5d2291 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,6 @@
 body {
+	/*
+	*/
 	overflow-x: hidden;
 }
 body * {
@@ -68,33 +70,39 @@ pre.banner.t1_5 {
 }
 
 .mouse_container {
-	position: relative;
-	margin-left: 0px;
-	display: contents;
-	/*
-	border: 1px solid red;
-	margin-right: auto;
-	height: 8.5em;
-	width: 11.9em;
-	*/
+	display: grid;
 	width: fit-content;
+	margin-left: 0px;
+
+	/*
+	border: 1px solid blue;
+	*/
 }
 pre.mouse {
-	--tmouse: 2s;
-	position: absolute;
-	left: 0px;
-	bottom: 0px;
-	margin: 0px;
+	position: relative;
+	grid-column: 1;
+	grid-row: 1;
+	margin: auto auto 0px 0px;
+	/*
+	width: fit-content;
+	height: fit-content;
+
+	border: 1px solid red;
+	*/
+
 	opacity: 0;
+	--tmouse: 2s;
 	animation-name: mouse;
 	animation-iteration-count: infinite;
 	animation-duration: var(--tmouse);
 	animation-timing-function: linear;
 	animation-direction: normal;
 }
+/*
 pre.mouse:first-child {
 	position: relative;
 }
+*/
 
 pre.mouse.f2  {animation-delay: calc(var(--tmouse) * 10/100);}
 pre.mouse.f3  {animation-delay: calc(var(--tmouse) * 20/100);}