/* styles.css */
/* universal selector - Applies to whole document */
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	background: transparent;
    color: gainsboro;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;

}
/* To center everything in game */
.game{
	display: flex;
	flex-direction: column;
    height: 100vh;
	width: 100vw;
	justify-content: center;
	align-items: center;
}

/* Title of the game */
 .title{
	color: aliceblue;
	position: absolute;
	top: 0;
	margin-top: 50px;
    font-size: 2rem;
	z-index: 2;
} 

.h1title{
	position: absolute;
	top: 20px;
	font-size: 1rem;
	z-index: 3;
}

/* Score Board */
.score{
	display: flex;
	justify-content: space-evenly;
	position: absolute;
	top: 110px;
	left:calc(50vw - 200px);
	z-index: 4;
	height: 250px;
}



/* Score */
.p-count,.c-count{
	text-align: center;
	font-size: 2rem;
	margin-top: 0.2rem;
	font-weight: 800;
	color:orangered;
}

/* displaying three buttons in one line */
.options{

	position: absolute;
    top: 55vh;
	display: flex;
	width: 30vw;
	justify-content: space-evenly;
	margin-top: 0rem;
	margin-bottom: 1rem;
}

/* Styling on alll three buttons */
.rock, .paper, .scissor{
	padding-top:45px;
	padding-bottom:45px;
	width: 100px;
	border-radius: 10px;
	background: green;
	outline: none;

	border: 2px solid orange;
	cursor: pointer;

	font-weight: bolder;
}

.rock:hover, .paper:hover, .scissor:hover{
	padding-top:45px;
	padding-bottom:45px;
	width: 100px;
	border-radius: 10px;
	background: orangered;
	outline: none;
	border: 2px solid orange;
	cursor: pointer;

	font-weight: bolder;
}

.score{
	border-radius: 30%;
	background-color: rgba(255, 255, 255, 0.5);
	border: 10px solid orangered;
	width: 400px;
	margin:auto;
}

.move{
	font-size: 1.5rem;
    font-weight: bold;
}

/* Reload button style */
.reload {
	display: none;
	margin-top: 2rem;
	padding: 1rem;
	background: green;
	outline: none;
	border: none;
	border-radius: 10px;
	cursor: pointer;
}

.result{
	font-size: 1.2rem;
	z-index: 5;
	margin-top: 20px;
}

#monkeyGame{
	width: 600px;
	height: 400px;
	display:none; 
	border: none;
}


.move{
	position: absolute;
	top: 80vh;
}

.movesleft{
	position: absolute;
	padding: 10px;
	top: 85vh;
}

#footerNMD{
		
	position:absolute;
	top: 90vh;
	font-size:1rem;
	z-index: 3000;
	width: 100px;
	padding: 10px;
	border-radius: 10px;
	background: green;
	outline: none;

	border: 2px solid orange;
	cursor: pointer;

	font-weight: bolder;
}

#footerNMD:hover{
		
	position:absolute;
	top: 90vh;
	font-size:1rem;
	z-index: 3000;
	width: 100px;
	padding: 10px;
	border-radius: 10px;
	background: orangered;
	outline: none;

	border: 2px solid orange;
	cursor: pointer;

	font-weight: bolder;
}

/* Responsive Design */
@media screen and (max-width: 430px)
{
	
	.title{
		text-align: center;
		font-size: x-large;
	}
	.score{
		position: absolute;
		top: 80px;

	}
	.options{
		position: absolute;
		top: 350px;
		width: 100vw;
	}

	.move{
		font-size: 1.3rem;
	}



	#footerNMD{
		
		position:absolute;
		top: 80vh;
		font-size:1rem;
		padding: 10px;
		z-index: 3000;
		width: 200px;

		border-radius: 10px;
		background: green;
		outline: none;
	
		border: 2px solid orange;
		cursor: pointer;
	
		font-weight: bolder;
	}
	#footerNMD:hover{
		
		position:absolute;
		top: 80vh;
		font-size:1rem;
		padding: 10px;
		z-index: 3000;
		width: 200px;

		border-radius: 10px;
		background: orangered;
		outline: none;
	
		border: 2px solid orange;
		cursor: pointer;
	
		font-weight: bolder;
	}

	.move{
		position: absolute;
		top: 70vh;
	}
	
	.movesleft{
		position: absolute;
		padding: 10px;
		top: 75vh;
	}

	.result{
		font-size: 1.2rem;
		z-index: 5;
		margin-top: -50px;
	}


}

@media screen and (max-width: 260px)
{
	.p1Image{
		background-image: url("imgSPR/NMDMONKEY_100_1.png") !important;
		background-repeat: no-repeat;
		height: 100px!important;
		width: 100px!important;
		transform: scale(1)!important;
		margin-top: 20px!important;
	}
	
	.cpuImage{
		background-image: url("imgSPR/NMDMONKEY_100_2.png") !important;
		background-repeat: no-repeat;
		height: 100px!important;
		width: 100px!important;
		transform: scale(1)!important;
		margin-top: 20px!important;
		margin-left: 15px;
	}
}

.p1Image{
    background-image: url("imgSPR/NMDMONKEY_Player1.png");
    height: 150px;
    width: 200px;
    transform: scale(0.6);
    margin-top: -20px;
    
}

.cpuImage{
    background-image: url("imgSPR/NMDMONKEY.png");
    height: 150px;
    width: 200px;
    transform: scale(0.6);
    margin-top: -20px;
    
}


.rockImage{
    background-image: url("imgSPR/Rock-paper-scissors_Shapes.png");
    background-position-x: 0%;
    height: 100px;
    width: 100px;
	margin: auto;
	margin-top: 30px;
}

.paperImage{
    background-image: url("imgSPR/Rock-paper-scissors_Shapes.png");
    background-position-x: 50%;
    height: 100px;
    width: 100px;
	margin: auto;
	margin-top: 30px;
}

.scissorsImage{
    background-image: url("imgSPR/Rock-paper-scissors_Shapes.png");
    background-position-x: 100%;
    height: 100px;
    width: 100px;
	margin: auto;
	margin-top: 30px;
}


.tieImage{
    background-image: url("imgSPR/tieXL.png");
    background-position-x: 100%;
    height: 100px;
    width: 100px;
	margin: auto;
	margin-top: 30px;
}