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

body{
	align-items: center;
	font-family: sans-serif;
	color: black;

}

#status{
	position: absolute;
	z-index: 100;
	left: 0;
}
#count, #timer{
	font-size: 3em;
}

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

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

#layer0{
	width: 1vw;
	height: 100vh;
	position: absolute;
	background: linear-gradient(to right, rgb(0,0,255),rgb(255,255,255));
	mix-blend-mode: multiply;
	animation: expandx 8s linear infinite;
}

#layer1{
	width: 100vw;
	height: 1vh;
	position: absolute;
	background: linear-gradient(to bottom, rgb(130, 10, 60),rgb(255,255,255));
	mix-blend-mode: multiply;
	animation: expandy 8s linear infinite;
}

#layer2{
	width: 600px;
	height: 300px;
	border-radius: 100%;
	border: 100px solid rgb(23, 107, 110);
	float: left;
	margin: 100px 300px;
	mix-blend-mode: multiply;
	animation: blur 8s linear infinite forwards;
}

#layer3{
	width: 600px;
	height: 600px;
	background: linear-gradient(to bottom right, rgb(255,255,0),rgb(255,255,255));
	float: left;
	margin-left: 100px;
	position: relative;
	left: 100px;
	mix-blend-mode: multiply;
	animation: spin 8s ease-out infinite;
}


@keyframes expandx{
	0%{
		width: 1%;
	}
	
	100%{
		width: 100vw;
	}
}

@keyframes expandy{
	0%{	
		min-height: 1vh;
		height: 1%;
	}
	
	100%{
		min-height: 100vh;
		height: 100%;
	}
}

@keyframes blur{
	0%{
		filter: blur(0px);
	}
	
	100%{
		filter: blur(30px);
	}
	
}

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