@import "./mouses/mouse_1.css";
@import "./mouses/mouse_2.css";
@import "./mouses/mouse_3.css";
@import "./mouses/mouse_4.css";

.mouse {
	margin: auto;
	width: fit-content;
	overflow: hidden;

	> div {
		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;
	}
}
@keyframes mouse_move {
	0%    {top: 0%;}
	25%   {top: -100%;}
	50%   {top: -200%;}
	75%   {top: -300%;}
}