@charset "UTF-8";
/* CSS Document */

body{
	background-color: darkgray;
}

#info{
	top: 100px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	width: 40%;
	height: 20%;
	background-color: #c5c5c5;border-radius: 20px;
	border: 1px solid black;
	vertical-align: middle;
	
}

#forData{
	width: 400px;
	height: 778px;
	background-color: #c5c5c5;
	padding-top: 72px;
}

#forData p{
	color: black;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	font-size: 2.5em;
	text-transform: uppercase;
}

.blink{
	animation: blink 1s linear infinite;
}

.anim-in{
	animation: scale-in;
	animation-duration: 2s;
	animation-iteration-count: 1;
}

.hidden{
	display: none;
}

#info p{
	font-family: "Impact", "Haettenschweiler", "Franklin Gothic Bold", "Arial Black", "sans-serif";
	font-size: 2em;
	color: black;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

#btnClose{
	padding: 4px;
	border: 1px solid black;
	border-radius: 5px;
	width: 120px;
	cursor: grab;
}

#btnRestart{
	border: 1px solid black;
	width: fit-content;
	padding: 8px 20px;
	cursor: grab;
}

#container{
	width: 800px;
	text-align: center;
	display: flex;
	margin-left: auto;
	margin-right: auto;
}

canvas{
	margin-left: auto;
	margin-right: auto;
	background-image: url("img/track.png");
	background-repeat: repeat-y;	
}

@keyframes scale-in{
	0%{
		transform: scale(0%);
	}
	100%{
		transform: scale(100%);
	}
}

@keyframes scale-out{
	0%{
		transform: scale(100%);
		opacity: 1;
	}
	100%{
		transform: scale(0%);
		opacity: 0;
	}
}

@keyframes blink{
	0%{
		opacity: 0.0;
	}
	100%{
		opacity: 1.0;
	}
}