mouses are now using transform instead of top to work on chrome

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%);}
 }
+