* { margin: 0; padding: 0; box-sizing: border-box; }

body{
	align-items: center;
	font-family: sans-serif;
	color: black;
	min-height: 100vh;
}

#status{
	position: absolute;
	z-index: 100;
	left: 0;
}

.id:first-of-type{
	font-weight: bold;
}

#count, #timer{
	font-size: 3em;
}

img{
	mix-blend-mode: multiply;
	position: absolute;
	top: 0;
	left: 0;
}

.track{
	position: absolute;
	top: 0;
	left: 0;
}

#layer0 div{
	width: 100px;
	height: 100px;
	float: left;
	background: rgb(0,255,0);
	margin-left: 100px;
	border-radius: 0 25px 0px 50px;
	mix-blend-mode: exclusion;
	animation: shift 1s linear alternate infinite;
}

#layer1 div{
	width: 130px;
	height: 130px;
	float: left;
	border: 30px solid rgb(255,0,255);
	margin-left: 100px;
	border-radius: 100%;
	mix-blend-mode: exclusion;
	animation: circular 1s linear alternate infinite;
}

#layer2 div{
	width: 100px;
	height: 100px;
	background: rgb(0,0,255);
	float: left;
	margin-left: 100px;
	mix-blend-mode: screen;
	animation: expand 1s linear alternate infinite;
}

#layer3 div{
	width: 0px;
	height: 0px;
	background: transparent;
	border-right: 200px solid transparent;
	border-bottom: 200px solid rgb(255,0,0);
	float: left;
	margin-left: 100px;
	mix-blend-mode: screen;
	animation: expand 2s linear alternate infinite;
}


@keyframes shift{
	0%{
		transform: translate(0,0);
	}
	50%{
		transform: translate(100px,0);
	}
	100%{
		transform: translate(100px,100px);
	}
}

@keyframes expand{
	0%{
		transform: scale(2,1);
	}
	50%{
		transform: scale(1,1);
	}
	100%{
		transform: scale(1,2);
	}
}


@keyframes circular{
	0%{
		border-width: 30px;
	}
	100%{
		border-width: 65px;
	}
}

@keyframes spin{
	0%{
		transform: rotate(-90deg);
	}
	50%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(90deg);
	}
}

@keyframes expand{
	0%{
		transform: scale(2,1);
	}
	50%{
		transform: scale(1,1);
	}
	100%{
		transform: scale(1,2);
	}
}


/*@keyframes three{
	0%{
		transform: scale(1, 0.5);
	}
	100%{
		transform: scale(0.5, 1);
	}
}*/