body {
	background-color: black;
	font-family: Impact, Charcoal, sans-serif;
	color: white;
}

#playWindow {
	position: relative;
	display: flex;
	justify-content: center;
}

#playArea {
	position: relative;
    width: 720px;
	height: 576px;
	border: solid rgb(255, 255, 255) 2px;
	overflow: hidden;
}

#scoreContainer {
	position: absolute;
	left: 10px;
	top: 10px;
	text-align: left;
	font-size: 1.5em;
	z-index: 30;
}

.score {
	padding: 10px;
}

.sprite {
	position: absolute;
	z-index: 10;
}

#messageContainer {
	position: absolute;
	top: 200px;
	text-align: center;
	width: 100%;
	z-index: 40;
}

.message {
	font-size: 3em;
	padding: 20px;
}

.star {
	position: absolute;
	top: 0px;
	background-color: white;
	border-radius: 50%;
	animation-name: starY;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.starSmall {
	left: 300px;
	width: 3px;
	height: 3px; 
	background-color: gray;
	animation-duration: 5s; 
}

.starMedium {
	left: 400px;
	width: 4px;
	height: 4px; 
	animation-duration: 4s; 
}

.starBig {
	left: 100px;
	width: 5px;
	height: 5px; 
	animation-duration: 3s; 
}

@keyframes starY {
	from {
	  transform: translateY(-30px);
	}
	to {
	  transform: translateY(600px);
	}
  }

@keyframes explosion {
	0%   {background-image: url("../assets/Explosion/explosion00_s.png");}
	20%   {background-image: url("../assets/Explosion/explosion01_s.png"); }
	40%   {background-image: url("../assets/Explosion/explosion02_s.png");}
	60%   {background-image: url("../assets/Explosion/explosion03_s.png");opacity: 0.9;}
	80%   {background-image: url("../assets/Explosion/explosion04_s.png");opacity: 0.8;}
	100%   {background-image: url("../assets/Explosion/explosion05_s.png");opacity: 0.5;}
}

.explosion {
	width: 100px;
	height: 100px;
	position: absolute;
	left: 500px;
	top: 300px;
	animation-name: explosion;
	animation-duration: 0.5s;
	background-repeat: no-repeat;
	z-index: 20;
}