* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
}

.Control {
	color: blue;
}

.background {
	height: 100vh;
	width: 100vw;
	background: url('images/background-img.webp') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.bird {
	height: 100px;
	width: 130px;
	position: fixed;
	top: 5vh;
	left: 10vw;
	z-index: 100;
}
.chuck {
	height: 100px;
	width: 130px;
	position: fixed;
	top: 5vh;
	left: 10vw;
	z-index: 100;
}
.pipe_sprite {
	position: fixed;
	height: 70vh;
	width: 6vw;
	background: radial-gradient(lightgreen 50%, green);
	border: 5px solid black;
}

.message {
	position: absolute;
	z-index: 10;
	color: black;
	top: 30%;
	left: 50%;
	font-size: 50px;
	transform: translate(-50%, -50%);
	text-align: center;
	color: cadetblue;
}

.start {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 45%;
	font-size: 50px;
	text-align: center;
	color: rgb(124, 160, 95);
	border-radius: 30%;
	border: none;
	background: none;
	cursor: pointer;
}

.start:hover {
	animation: scale-up 1s forwards;
}

.start:active {
	transform: scale(0.9);
	background-color: rgb(49, 105, 2);
	box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.2);
	color: aliceblue;
}

.exit {
	position: absolute;
	z-index: 10;
	top: 65%;
	left: 45%;
	font-size: 50px;
	text-align: center;
	color: rgb(216, 64, 37);
	border-radius: 30%;
	border: none;
	background: none;
	cursor: pointer;
}

.exit:hover {
	background-color: rgb(228, 58, 58, 0.1);
	color: rgb(247, 24, 24);
	transform: scale(1.2);
}

.exit:active {
	transform: scale(0.9);
	background-color: rgb(49, 105, 2);
	box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.2);
	color: aliceblue;
}
.switch{
	position: absolute;
	z-index: 10;
	top: 60%;
	left: 55%;
	font-size: 20px;
	text-align: center;
	color: rgb(216, 64, 37);
	background-color: rgb(92, 231, 231);
	cursor: pointer;
}
.messageStyle {
	background: rgb(108, 237, 241, 0.4);
	padding: 30px;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 8px;
	border-radius: 20%;
	border: 2px solid rgb(63, 155, 68);
}

.score {
	position: fixed;
	z-index: 10;
	height: 10vh;
	font-size: 10vh;
	font-weight: 100;
	color: white;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: black;
	top: 0;
	right: 0;
	margin: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

.score_val {
	color: gold;
	font-weight: bold;
}

@keyframes scale {
	0% {
		transform: scale(1);
		color: rgb(124, 160, 95);
	}

	50% {
		transform: scale(0.7);
		color: rgb(46, 100, 2);
	}

	100% {
		transform: scale(1);
		color: rgb(124, 160, 95);
	}
}

.start {
	animation: scale 2s infinite;
}

@media only screen and (max-width: 1080px) {
	.message {
		font-size: 50px;
		top: 50%;
		white-space: nowrap;
	}

	.score {
		font-size: 8vh;
	}

	.bird {
		width: 120px;
		height: 90px;
	}

	.pipe_sprite {
		width: 50px;
	}
}