.mouse {
	position: relative;
	margin: 20px 0px;
}
.frames_container {
	display: grid;
	grid-template-rows: 1fr;
	width: fit-content;
}
pre.frame.hide {
	display: none;
}
pre.frame {
	position: relative;
	justify-items: start;
	align-items: end;
	grid-column: 1;
	grid-row: 1;

	opacity: 0;
	--tframes: 2s;
	animation-name: ascii_frame;
	animation-iteration-count: infinite;
	animation-duration: var(--tframes);
	animation-timing-function: steps(3);
	animation-direction: normal;
}

pre.frame.f2  {animation-delay: calc(var(--tframes) * 25/100);}
pre.frame.f3  {animation-delay: calc(var(--tframes) * 50/100);}
pre.frame.f4  {animation-delay: calc(var(--tframes) * 75/100);}

@keyframes ascii_frame {
	0%    {opacity: 1;}
	25%   {opacity: 1;}
	25.1% {opacity: 0;}
	100%  {opacity: 0;}
}

#mouse_1 {
	place-self: center;
}
#mouse_2 {
	left: 10%;
}
#mouse_3 {
	left: 60%;
}
#mouse_4 {
	left: 20%;
}