/* //Style in GamePlay  */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
}
.background {
	height: 100vh;
	width: 100vw;
	background: url('images/background-img.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-size: cover;
}
.bird {
	height: 100px;
	width: 130px;
	position: fixed;
	top: 40vh;
	left: 30vw;
	z-index: 100;
}
.pipe_sprite {
	position: fixed;
	top: 40vh;
	left: 100vw;
	height: 70vh;
	width: 6vw;
	background:radial-gradient(gray 50%, white);
	border: 5px solid black;
}
.message {
	position: absolute;
	z-index: 10;
	color: black;
	top: 30%;
	left: 50%;
	font-size: 4em;
	transform: translate(-50%, -50%);
	text-align: center;
}
.messageStyle{

	
  --background-color:#5d6d7e;
    --background-color-dark:black;

    display: inline-block;
    margin-top: 10%;
    margin-left: 3%;
    padding: 1% 5%;
    font-family: 'Boogaloo', cursive;
    font-size: 50px;
    border: none;
    outline: none;
    text-decoration: none;
    color:white;
    cursor: pointer;
    background-color: var(--background-color);
    box-shadow: 6px 6px 0 var(--background-color-dark);
}
.score {
	position: fixed;
	z-index: 10;
	height: 10vh;
	font-size: 5vh;
	font-weight: 100;
	color: black;
	-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
	top: 0;
	left: 0;
	margin: 10px;
	font-family: 'Boogaloo', cursive;
	border-color:black;]
	
}
.score_val {
	color: gold;
	font-weight: bold;
}
@media only screen and (max-width: 1080px) {
    .message{
		font-size: 50px;
		top: 50%;
		white-space: nowrap;
	}
	.score{
		font-size: 8px;
	}

	.pipe_sprite{
		width: 14vw;
	}
}
	.monster{
		margin-left: 1500px;
		margin-top: -500px;
		width: 20%;
		display: none;
		position: absolute;
	}
	#gbird{
		margin-top:-400px;
			margin-left: 700px;
		width: 20%;
		position: absolute;
		
	}
	
	#menu:hover {
	   transform: translateX(2px) translateY(2px);
    box-shadow: 4px 4px 0 var(--background-color-dark);

	}
	
		#wmsg:hover {
	   transform: translateX(2px) translateY(2px);
    box-shadow: 4px 4px 0 var(--background-color-dark);

	}
	
			#restart:hover {
	   transform: translateX(2px) translateY(2px);
    box-shadow: 4px 4px 0 var(--background-color-dark);

	}