@font-face {
	font-family: "Digital7";
	src: url("../font/digital-7.ttf");
}

@font-face {
	font-family: "Digital14";
	src: url("../font/digital-14.ttf");
}
/*
#drivercar #hit,
.carhit {
	border: 4px solid yellow;
}
*/
* {
	user-select: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Digital14", sans-serif;
}

html,
body {
	width: 1910px;
	min-width: 1910px;
	height: 960px;
	min-height: 960px;
}

body {
	overflow: hidden;
	background-color: black;
}

#gamecontainer {
	width: 1910px;
	min-width: 1910px;
	height: 960px;
	min-height: 960px;
	overflow: hidden;
	display: block;
	position: relative;
}

.beta {
	position: absolute;
	z-index: 100000;
	top: 20px;
	left: 20px;
	font-size: 2rem;
	font-family: "Digital7", sans-serif;
	color: yellow;
}
.arrowkeys {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	font-family: "Digital7", sans-serif;
	font-size: 32px;
	color: white;
	z-index: 1000;
	filter: drop-shadow(0 0 4px yellow) drop-shadow(0 0 8px yellow);
}
.by {
	position: absolute;
	bottom: 150px;
	left: 50%;
	transform: translateX(-50%);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: white;
	z-index: 10;
}

.link {
	display: none;
	margin-top: 40px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: white;
	z-index: 10;
}

.by a {
	font-family: Arial, Helvetica, sans-serif;
	color: white;
	font-weight: bold;
	font-size: 2rem;
	text-decoration: none;
}
#gameover {
	display: none;
	position: absolute;
	left: 50%;
	top: 20%;
	transform: translateX(-50%) translateY(-50%);
	color: #ffffff;
	z-index: 5000;
}
.glitched {
	display: none;
	content: "";
	background-image: url("../assets/glitchdead.gif");
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5001;
	mix-blend-mode: screen;
	animation: glitchfade 1s linear 1 forwards;
}
@keyframes glitchfade {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}
#gameoverh1 {
	color: white;
	text-align: center;
	font-family: "Digital7", sans-serif;
	filter: drop-shadow(0 0 4px yellow) drop-shadow(0 0 8px yellow);
	font-size: 7rem;
}

#gameoverscore {
	text-align: center;
	filter: drop-shadow(0 0 4px yellow) drop-shadow(0 0 8px yellow);
	font-family: "Digital7", sans-serif;
	font-size: 12rem;
}
#prescreen {
	position: absolute;
	z-index: 10000;
	width: 110%;
	height: 110%;
	top: 50%;
	left: 50%;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(30px);
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	transform: translateX(-50%) translateY(-50%);
}
#prescreen h1,
#prescreen #play {
	font-family: "Digital7", sans-serif;
}

#prescreen h1 {
	color: white;
	filter: drop-shadow(0 0 24px yellow);
	transform: skew(-8deg, -16deg);
	font-size: 11rem;
	line-height: 9rem;
	animation: flicker 0.1s linear infinite;
}
@keyframes flicker {
	from {
		filter: drop-shadow(0 0 24px yellow);
	}
	to {
		filter: drop-shadow(0 0 18px yellow);
	}
}

#prescreen #play {
	font-size: 3rem;
	margin-top: 80px;
	padding: 20px 88px;
	border: 1px solid rgba(255, 255, 0, 0.4);
}
#prescreen #play:hover {
	cursor: pointer;
	color: black;
	background: yellow;
	box-shadow: 0 0 24px 0 yellow;
}

#speedlines {
	position: absolute;
	mix-blend-mode: screen;
	z-index: 34;
	width: 180%;
	height: 150%;
	display: none;
	top: -40%;
	left: 50%;
	transform: translateX(-50%);
}
#score {
	position: absolute;
	top: 10px;
	font-family: "Digital14", sans-serif;
	right: 20px;
	z-index: 400;
	color: black;
	font-size: 6rem;
	filter: drop-shadow(0 0 3px yellow) drop-shadow(0 0 6px yellow);
}

#stats {
	display: grid;
	grid-template-columns: 1fr;
	font-family: "Digital14", sans-serif;
	width: 100px;
	justify-content: end;
	position: absolute;
	top: 90px;
	right: 20px;
	z-index: 400;
	color: black;
	font-size: 4rem;
	text-align: right;
	filter: drop-shadow(0 0 3px yellow) drop-shadow(0 0 6px yellow);
}
.multiplierstats {
	display: grid;
	grid-template-columns: 1fr;
	font-family: "Digital7", sans-serif;
	text-align: center;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 400;
	color: yellow;
	font-size: 6rem;
	transform-origin: center left;
	filter: drop-shadow(0 0 4px yellow) drop-shadow(0 0 8px yellow);
}

.multido {
	animation: multido 0.2s ease-in-out 1 forwards;
}
@keyframes multido {
	0% {
		scale: 1;
	}
	20% {
		scale: 2;
	}
	100% {
		scale: 1;
	}
}

#starfield {
	position: absolute;
	width: 150%;
	height: 150%;
	top: 50%;
	left: 50%;
	transform-origin: top left;
	transform: translateX(-50%) translateY(-50%);
	animation: staryrotate 320s linear infinite;
}

@keyframes staryrotate {
	from {
		rotate: 0deg;
	}
	to {
		rotate: 360deg;
	}
}

.star {
	position: absolute;
	width: 1px;
	height: 1px;
	background-color: white;
	border-radius: 50%;
}

#sun {
	width: 20%;
	aspect-ratio: 1;
	background: linear-gradient(
		0deg,
		rgb(255, 88, 0) 30%,
		rgb(255, 255, 0) 50%,
		rgb(255, 255, 207) 100%
	);
	content: "";
	border-radius: 100%;
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translateX(-50%) translateY(-60%);
	z-index: 1;
	overflow: hidden;
	animation: sundown 480s infinite alternate;
	filter: drop-shadow(0 0 4px rgba(255, 255, 0, 1))
		drop-shadow(0 0 8px rgba(255, 255, 0, 1))
		drop-shadow(0 0 32px rgba(255, 255, 0, 1))
		drop-shadow(0 0 228px rgba(255, 255, 0, 0.75));
}

@keyframes sundown {
	from {
		transform: translateX(-50%) translateY(-20%);
	}
	to {
		transform: translateX(-50%) translateY(-85%);
	}
}
#cityscape {
	background-image: url("../assets/cityscape.svg");
	background-repeat: no-repeat;
	background-position: center center;
	width: 100%;
	height: 60%;
	content: "";
	position: absolute;
	display: block;
	bottom: 45%;
	z-index: 2;
	filter: brightness(1) contrast(1);
	animation: citydown 480s linear infinite alternate;
}
@keyframes citydown {
	from {
		filter: brightness(0.3) contrast(1.4);
	}
	to {
		filter: brightness(1) contrast(1);
	}
}
@keyframes roaddark {
	from {
		filter: brightness(0.6) contrast(1.4);
	}
	to {
		filter: brightness(1.2) contrast(1.2);
	}
}
#background {
	background: linear-gradient(
		180deg,
		rgb(4, 0, 20) 0%,
		rgb(35, 80, 227) 100%
	);
	position: absolute;
	width: 100%;
	height: 100%;
	content: "";
	z-index: -1;
	display: block;
	left: 0;
	top: 0;
	animation: back 480s linear infinite alternate;
}
@keyframes back {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-350px);
	}
}
#ground {
	background: linear-gradient(180deg, rgb(3, 26, 141) 0%, rgb(2, 7, 61) 100%);
	width: 100%;
	height: 60.5%;
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
	backdrop-filter: blur(10px);
	animation: roaddark 480s linear infinite alternate;
	perspective: 400px;
	transform-style: preserve-3d;
}

#ground div {
	display: grid;
	width: 300%;
	height: 200%;
	top: -80%;
	position: absolute;
	transform: rotate3d(1, 0, 0, 50deg) translateX(-50%);
}

#ground i {
	width: 100%;
	border: 2px solid rgba(48, 77, 223, 0.65);
	filter: drop-shadow(0 0 5px rgba(48, 77, 223, 0.467));
	animation: ground 0.2s linear infinite;
}
@keyframes ground {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(100%);
	}
}
.level2 #ground i {
	animation: ground 0.15s linear infinite;
}

.level3 #ground i {
	animation: ground 0.1s linear infinite;
}
.level4 #ground i {
	animation: ground 0.01s linear infinite;
}

#ground:after {
	background: linear-gradient(
		180deg,
		rgba(255, 179, 227, 0) 0%,
		rgba(216, 45, 255, 0.5) 24%,
		rgba(238, 161, 255, 0.7) 34%,
		rgba(217, 214, 17, 0.2) 35%,
		rgba(224, 206, 10, 0) 100%
	);
	width: 100%;
	height: 300px;
	content: "";
	position: absolute;
	display: block;
	top: -100px;
	left: 0;
	z-index: 10;
	animation: roaddark 480s linear infinite alternate;
}

#three {
	height: 60%;
	position: absolute;
	bottom: 0;
	width: 100%;
	perspective: 400px;
	transform-style: preserve-3d;
	z-index: 100;
}

#road {
	overflow: hidden;
	width: 420px;
	height: 300%;
	content: "";
	position: absolute;
	top: -790px;
	left: 50%;
	display: block;
	background: linear-gradient(
		180deg,
		rgba(3, 26, 141, 0.5) 0%,
		rgba(2, 7, 61, 0.8) 100%
	);
	/* ackground-color: rgba(0, 0, 0, 0.5); */
	transform: rotate3d(1, 0, 0, 50deg) translateX(-50%);
	animation: roaddark 480s linear infinite alternate;
}
#cars-container {
	width: 1910px;
	min-width: 1910px;
	height: 960px;
	min-height: 960px;
	overflow: hidden;
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 300;
	transform: translateX(-50%) translateY(-50%);
	animation: roaddark 480s linear infinite alternate;
}

.roadpart {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	height: 200px;
}

.playing .roadpart {
	animation: moveDown linear 0.2s infinite;
}

.playing .level2 .roadpart {
	animation: moveDown linear 0.14s infinite;
}

.playing .level3 .roadpart {
	animation: moveDown linear 0.07s infinite;
}

.playing .level4 .roadpart {
	animation: moveDown linear 0.02s infinite;
}

.roadpart i {
	width: 8px;
	height: 88px;
	background: yellow;
	content: "";
	filter: drop-shadow(0 0 3px yellow) drop-shadow(0 0 8px yellow);
}

@keyframes moveDown {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(100%);
	}
}

#drivercar {
	width: 440px;
	height: 260px;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	content: "";
	z-index: 200;
	overflow: visible !important;
	animation: carshake 0.07s infinite alternate,
		roaddark 480s linear infinite alternate;
	filter: brightness(1.3) contrast(1.2) hue-rotate(350deg);
}
#drivercar #hit {
	position: absolute;
	width: 180px;
	height: 80%;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}
#drivercar:after {
	display: block;
	content: "";
	width: 150px;
	height: 80px;
	border-radius: 200px;
	background: rgba(255, 255, 255, 0.2);
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1))
		drop-shadow(0 0 24px rgb(255, 255, 255)) blur(10px);
	position: absolute;
	z-index: 1;
	bottom: 25px;
	left: 60px;
}

#drivercar:before {
	display: block;
	content: "";
	width: 150px;
	height: 80px;
	border-radius: 100%;
	background: rgba(255, 255, 255, 0.2);
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1))
		drop-shadow(0 0 24px rgb(255, 255, 255)) blur(10px);
	position: absolute;
	z-index: 1;
	bottom: 25px;
	left: 220px;
}

#drivercar.left:before {
	bottom: 45px;
	left: 160px;
}
#drivercar.left:after {
	bottom: 45px;
	left: -20px;
}

#drivercar.right:before {
	bottom: 45px;
	left: 300px;
}
#drivercar.right:after {
	bottom: 45px;
	left: 130px;
}

@keyframes carshake {
	from {
		bottom: 20px;
	}
	from {
		bottom: 22px;
	}
}
.middle {
	background: url("../assets/middle.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 350px;
}

.left {
	background: url("../assets/side.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 450px;
}

.right {
	background: url("../assets/side2.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 450px;
}

.level {
	display: none;
	position: absolute;
	left: 50%;
	top: 20%;
	transform: translateX(-50%) translateY(-50%);
	color: white;
	z-index: 500;
	font-family: "Digital7", sans-serif;
	filter: drop-shadow(0 0 4px yellow) drop-shadow(0 0 8px yellow);
	font-size: 4rem;
	animation: level 1s ease-out 1 forwards;
	transform-origin: top left;
}

@keyframes level {
	0% {
		scale: 1;
		opacity: 1;
	}
	60% {
		scale: 2;
		opacity: 1;
	}
	100% {
		scale: 2;
		opacity: 0;
	}
}

.smokey {
	background-image: url("../assets/smoker.gif");
	background-size: contain;
	background-blend-mode: screen;
	left: 15%;
	top: 50%;
	width: 300px;
	height: 150px;
	content: "";
	mix-blend-mode: screen;
	position: absolute;
	z-index: 100;
	display: none;
}

.car {
	width: 400px;
	height: 260px;
	position: absolute;
	z-index: 300;
	content: "";
	scale: 0.1;
	top: 24%;
}

.carhit {
	width: 100px;
	height: 100px;
	position: absolute;
	content: "";
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.showmulti {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 18rem;
	filter: drop-shadow(0 0 4px yellow) drop-shadow(0 0 8px yellow);
	font-family: "Digital7", sans-serif;
	color: yellow;
	transform: translateX(-50%) translateY(-50%);
}

.car:before {
	display: block;
	content: "";
	width: 250px;
	height: 150px;
	border-radius: 100%;
	background: rgba(255, 255, 255, 0.2);
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1))
		drop-shadow(0 0 24px rgb(255, 255, 255)) blur(10px);
	position: absolute;
	z-index: 1;
	bottom: -30px;
	left: 180px;
}
.car:after {
	display: block;
	content: "";
	width: 250px;
	height: 150px;
	border-radius: 100%;
	background: rgba(255, 255, 255, 0.2);
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1))
		drop-shadow(0 0 24px rgb(255, 255, 255)) blur(10px);
	position: absolute;
	z-index: 1;
	bottom: -30px;
	left: -40px;
}

.car.carleft:after {
	bottom: 0px;
	left: -90px;
}
.car.carleft:before {
	bottom: 0px;
	left: 80px;
}

.car.carright:after {
	bottom: 0px;
	left: 90px;
}
.car.carright:before {
	bottom: 0px;
	left: 250px;
}

.carleft {
	background: url("../assets/side.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 120%;
	overflow: visible;
	animation: carmiddle2 1 forwards cubic-bezier(1, 0, 1, 0),
		carleft 1 forwards cubic-bezier(1, 0, 1, 0),
		opa 1 cubic-bezier(1, 0, 1, 0);
}

.carmiddle {
	background: url("../assets/middle.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 120%;
	animation: carmiddle 1 forwards cubic-bezier(1, 0, 1, 0),
		carmid 1 forwards cubic-bezier(1, 0, 1, 0),
		opa 1 cubic-bezier(1, 0, 1, 0);
}

.carright {
	background: url("../assets/side2.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 120%;
	animation: carmiddle2 1 forwards cubic-bezier(1, 0, 1, 0),
		carright 1 cubic-bezier(1, 0, 1, 0), opa 1 cubic-bezier(1, 0, 1, 0);
}
.carleft,
.carmiddle,
.carright {
	animation-duration: 3s;
}
.multiplier {
	background-image: none !important;
}
.multiplier:before,
.multiplier:after {
	display: none;
}
.level2 .carleft,
.level2 .carmiddle,
.level2 .carright {
	animation-duration: 2.3s !important;
}
.level3 .carleft,
.level3 .carmiddle,
.level3 .carright {
	animation-duration: 1.5s !important;
}
.level4 .carleft,
.level4 .carmiddle,
.level4 .carright {
	animation-duration: 1.3s !important;
}

@keyframes opa {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	45% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes carmiddle {
	from {
		scale: 0.05;
		top: 25.5%;
	}
	to {
		scale: 1.6;
		top: 100%;
	}
}

@keyframes carmiddle2 {
	from {
		scale: 0.05;
		top: 25.5%;
	}
	to {
		scale: 1.9;
		top: 100%;
	}
}

@keyframes carmid {
	from {
		left: 755px;
	}
	to {
		left: 765px;
	}
}

@keyframes carleft {
	from {
		left: 720px;
	}
	to {
		left: 10px;
	}
}

@keyframes carright {
	from {
		left: 785px;
	}
	to {
		left: 1500px;
	}
}

.hiddenaudio {
	display: none;
}

.addpoint {
	position: absolute;
	top: -100px;
	left: 50%;
	white-space: nowrap;
	transform: translateX(-50%);
	font-family: "Digital7", sans-serif;
	font-weight: bolder;
	font-size: 7rem;
	color: yellow;
	filter: drop-shadow(0 0 8px yellow);
	animation: addpoints 0.1s ease-in-out 1 forwards;
}
@keyframes addpoints {
	from {
		top: -150px;
	}
	to {
		top: -400px;
	}
}