body {
	font-family: "Comic Neue";
	background-color: black;
	}
.center {
	width:800px;
	height:500px;
	position:absolute;
    z-index: 0;
	left:50%;
	top:50%;
	margin:-250px 0 0 -400px;
	text-align:center;
	border: 1px solid black;
	overflow: hidden;
}

.hidden{
	visibility: hidden;
}

.layer{
	z-index: 4;
	background-color: rgba(62, 62, 62, 0.6);
	width: 800px;
	height: 500px;
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 30px;
	justify-content: center;
	align-items: center;
}

h1{
	font-family: "Jua";
	font-size: 2em;
}

h2{
	color: white;
	font-family: "Jua";
	font-size: 2em;
}

p{
	color: white;
	font-size: 1.25em;
}

.explanation{
	display: flex;
	justify-content: center;
	text-align: left;
}

.explanation p{
	width: 330px;
	padding: 0px 13px;
}

.line{
	border-right: 1px solid white;
	text-align: right;
}

.controls{
	display: flex;
	gap: 10px;
	justify-content: center;
	
}

.control{
	display: flex;
	flex-direction: column;
	text-align: right;
	gap: 3px;
	
}

.control_symbol{
	display: flex;
	flex-direction: column;
	text-align: center;
	gap: 3px;

}

.mouseclick{
	background-image: url(../images/SVG/mouse.svg) ;
	width: 18px ;
	height: 23px ;
	animation: mouse 1s steps(2) infinite;
}

@-webkit-keyframes mouse {
	from{background-position: 0 0;}
	to{background-position: 0 -46px;}
}

.btn{
	cursor: pointer;
	background-color: white;
	border-radius: 20px;
	align-items: center;
	justify-content: center;
	font-family: "Jua";
	color: black;
	width: 198px;
	padding: 26px 0;
	transition: background-color 1s;
}

.btn:hover{
	background-color: #b8ffbb;
}

.sky{
	width: 2400px;
	height: 224px;
	background-image: url(../images/SVG/sky.svg);
	z-index: 1;
	animation: loop 30s linear infinite;
	position: absolute;
}

.lives{
	position: absolute;
	display: flex;
	z-index: 5;
	padding: 8px;
}

.points{
	position: absolute;
	z-index: 5;
	left: 671px;
	padding: 8px;
}

.points p{
	color: black;
	font-family: "Jua";
	font-size: 1.25em;
}

@-webkit-keyframes loop {
	from{transform: translateX(0px);}
	to{transform: translateX(-1600px);}
}

.road{
	width: 800px;
	height: 328px;
	background-image: url(../images/SVG/road.svg);
	z-index: 3;
	position: absolute;
	bottom: 113px;
}
.water{
	width: 2400px;
	height: 113px;
	background-image: url(../images/SVG/water.svg);
	z-index: 2;
	position: absolute;
	bottom: 0px;
	animation: loop 20s linear infinite;
}

.vehicle{
	position: absolute;
}

.truck{
	height: 63px;
	width: 153.63px;
	top: 230px;
	z-index: 6;
	left: -153.63px ;
}

.train{
	height: 54px;
	width: 191.08px;
	top: 292px;
	z-index: 7;
	left: -191.08px ;
}

.boat{
	height: 81px;
	width: 149.16px;
	top: 380px;
	z-index: 8;
	left: -149.16px ;
}

.player{
	width: 40px;
	height: 46px;
	position: absolute;
	z-index: 5;
	right: 40px;
	top: 250px;
}

.glue{
	width: 19px;
	height: 12px;
	position: absolute;
	z-index: 5;
	left: 701px;
	top: 263px;
}