.mouse {
	position: relative;
	margin: 20px 0px;
}
.frames_container {
	display: grid;
	grid-template-rows: repeat(4, 1fr);
	width: fit-content;
	/*
	border: 1px solid blue;
	*/
}
pre.frame.hide {
	display: none;
}
pre.frame {
	position: relative;
	margin: auto auto 0px 0px;
	/*
	grid-column: 1;
	grid-row: 1;

	width: fit-content;
	height: fit-content;

	border: 1px solid red;

	visibility: hidden;
	display: grid;
	*/

	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;}

	from {opacity: 1;}
	to   {opacity: 0;}

	from {visibility: visible;}
	to   {visibility: hidden;}

	from {display: grid;}
	to   {display: none;}
*/
	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%;
}