diff --git a/index.html b/index.html
index 98cc79d..419c17f 100644
--- a/index.html
+++ b/index.html
@@ -115,7 +115,7 @@
 				</ul>
 			</details>
 
-			<div class="mouse"><div class="mouse_1 pre"></div></div>
+			<div class="mouse"><div class="frames mouse_1 pre"></div></div>
 			<div class="banner banner_size_3 banner_speed_30 grid_full_width margin_bottom_small" aria-label="banner delimitation in ASCII art"></div>
 
 		</section>
@@ -129,7 +129,7 @@
 			PROJECTS
 		-->
 		<section id="projects" class="section">
-			<div class="mouse"><div class="mouse_3 pre"></div></div>
+			<div class="mouse"><div class="frames mouse_3 pre"></div></div>
 
 			<header>
 				<h1 aria-label="projets">
@@ -212,7 +212,7 @@
 			</article>
 -->
 
-			<div class="mouse"><div class="mouse_2 pre"></div></div>
+			<div class="mouse"><div class="frames mouse_2 pre"></div></div>
 			<div class="banner banner_size_3 banner_speed_20 banner_reverse grid_full_width" aria-label="banner delimitation in ASCII art"></div>
 
 		</section>
@@ -233,7 +233,7 @@
 				<p>hugogogo@protonmail.com</p>
 			</article>
 
-			<div class="mouse"><div class="mouse_4 pre"></div></div>
+			<div class="mouse"><div class="frames mouse_4 pre"></div></div>
 
 		</section>
 
diff --git a/styles/elements/mouses.css b/styles/elements/mouses.css
index 621d425..6c10818 100644
--- a/styles/elements/mouses.css
+++ b/styles/elements/mouses.css
@@ -8,42 +8,30 @@
 	width: fit-content;
 	overflow: hidden;
 
-	> div {
+	.frames {
 		position: relative;
-		top: 0%;
-
-		/*
-		* for pseudo elements ::before and ::after
-		* for some reason it does not work when applied to them directly
-		* if they are not position absolute
-		white-space: pre;
-		line-height: 0.8;
-		font-size: 1.0rem;
-		font-size: min(2.1vw, 1.0rem);
-		*/
-
-		--tframes: 2s;
-		animation-name: mouse_move;
-		animation-iteration-count: infinite;
-		animation-duration: var(--tframes);
-		animation-direction: normal;
-		animation-timing-function: steps(1);
-	}
-	> div::before {
-		position: relative;
-		top: 0px;
-		left: 0px;
-	}
-
-	> div::after {
-		position: absolute;
-		top: 100%;
-		left: 0px;
+		animation: mouse_move infinite 2s normal steps(4);
+		&::before {
+			position: relative;
+			top: 0px;
+			left: 0px;
+		}
+		&::after {
+			position: absolute;
+			top: 100%;
+			left: 0px;
+		}
 	}
 }
+
+/*
+* using 'transform' instead of 'top', because 'top' needs
+* the parent to have an explicit height
+* but in this case its height is according to the children
+*
+*/
 @keyframes mouse_move {
-	0%    {top: 0%;}
-	25%   {top: -100%;}
-	50%   {top: -200%;}
-	75%   {top: -300%;}
+	0%     {transform: translateY(0%);}
+	100%   {transform: translateY(-400%);}
 }
+