@charset "utf-8";
/* CSS Document */
@font-face
{
font-family: 'Dust Serif';
src: url('Dust Serif.ttf');
}
@font-face
{
font-family: 'Dafunk_FREE';
src: url('Dafunk_FREE.otf');
}
html, body{
	height: 100%;
}
*{margin:0;padding: 0;}
::selection{
background:rgba(0,0,0,0);	
}
body{
	overflow:hidden;
	background:#6ca;
	background:-webkit-linear-gradient(tan,#7dc);
	background:-moz-radial-gradient(#999,#ccc);
	background:-o-radial-gradient(tan,#7dc);
	background:-ms-radial-gradient(tan,#7dc);
}
.intro{
	font-size:3.5rem;
	font-weight:bold;	
	color:green;
	background:-webkit-radial-gradient(45%,7em 1rem,white,#100);
	background:-moz-radial-gradient(50% 50%, ellipse,rgb(1,1,1) 10%,rgba(0.6,0.5,0.6,0.9) 20%, rgba(0,0,0,0.9) 40%);
	width:100%;
	height:100%;
	text-shadow:5px 5px 5px white;
}
.intro span[data-name=Rajeshwar]{
	position:absolute;
	top:-20%;
	left:20%;
	font-family: 'Dafunk_FREE';
}
.intro span[data-name=Chinna]{
	position:absolute;
	top:40%;
	left:200%;
	font-family: 'Dafunk_FREE';
}
.intro span[data-name=Presents]{
	position:absolute;
	top:51%;
	left:200%;
	font-size:70%;
	color:#96c;
	font-family: 'Dust Serif';
}
.entrance{
	font-family: 'Dafunk_FREE';
	width:100%;
	height:100%;
	display:none;
	background:url(../images/haunted_house.jpg) no-repeat;
	background-size: cover;
	float:left;
}
.entrance h1{
	font-size: 2em;
	color: #fff;
	margin: 9.5% 0 0 12%;
	transform: perspective(300px) rotate(-3deg);
}
.entrance .entranceButtons{
	padding: 8% 0 0 12%;
}	
.entrance span{
	position:fixed;
	width:10%;
	height:35px;
	cursor:pointer;
}
.entrance span:hover{opacity:0.7;}	
.moreGames {
    display: contents;
}		
.mute{
	top:2%;
	right:60px;
	background:url(../images/musicOn.png) no-repeat;
	background-size : contain;
	}
.volume{
	background:url(../images/musicOff.png) no-repeat;
	background-size : contain;
}
.sound{
	top:2%;
	right:10px;
	background:url(../images/soundOn.png) no-repeat;
	background-size : contain;
}
.soundOff{
	background:url(../images/soundOff.png) no-repeat;
	background-size : contain;
}
.creditsPage{
	display:none;
	background:rgba(30,50,40,0.7);	
	float:left;
	width:100%;
	height: 100%;
}
.creditsPage ul{
	list-style:none;	
	padding: 20px 0;
	width:100%;
	margin:0 auto;
	text-align:left;
}

.creditsPage ul li{
	display:inline-flex;	
	padding: 15px 30px;
    font-size: 2.5rem;
    align-items: center;
    flex-direction: row;
    width: 41%;
	font-family: 'Dust Serif';
	color: #05154f;
}
.creditsPage ul li img{
	border:3px solid #fff;
	width:80px;
	height:80px;
	vertical-align:middle;	
	margin:0 20px 0 0;
}
.creditsPage .back {
	margin: 2% auto;
}
.helpPage{
	width:100%;
	height: 100%;
	text-align: center;
	font-size:1.5rem;
	font-weight:bold;	
	display:none;
}
.helpPage img{
	width: 60%;
    margin: 1%;
}
button{
	display:block;
	margin:2%;
	padding: 0.25%;
	color:brown;
	background:#ac6;
	background:-webkit-linear-gradient(silver,grey);
	background:-moz-linear-gradient(#cc2,#ffe);
	border-radius: 10rem 1rem;
	width: 17%;
	font-size: 1rem;
	box-shadow:5px 5px 10px #a33;
	font-family: 'Dafunk_FREE';
	cursor:url(../images/19.gif),pointer;
	letter-spacing: 3px;
}
button:hover{
	background:#89a;
	background:-webkit-linear-gradient(grey,silver);
	background:-moz-linear-gradient(#ffe,#cc2);
	color:gold;
	font-size: 1.2rem;
	box-shadow:0px 0px 25px white;
	text-shadow:0px 0px 10px blue;
}
.game{
	background:url('../images/Haunted House.png') no-repeat;
	background-size: cover;	
	background-position: center;
	height:100%;
	cursor:url(../images/2467.png), pointer;
	display:none;
	width:100%;
}
.helpPage .back{
	margin: 1% auto;
}
div[data-name^=ghost]{
	width:5%;
	height:5%;
	background:url('../images/ghost.gif') center bottom no-repeat;
	background-size: 10%;
	position:absolute;
	filter: drop-shadow(0 0 5px white);
}
.gun{
	background:  url(../images/Storm_PSR_First_Person_BOII.png) no-repeat;
	background-size:contain;
	position:fixed;
	bottom:0;
	left:30%;	
	width: 22%;
	height: 30%;
}
.bulletFire{
	position:absolute;
	width:48px;
	height:48px;
	background:url(../images/bullet.gif) no-repeat;
	display:none;
}
div[class^=blood]{
	height:3px;
	width:70%;
	background:red;	
	margin:0 auto;
	display:none;
	border-radius:10px;
}
.score{
	float:right;
	font-size:2rem;
	color:#acd;
	font-weight:bold;	
}
.bludParent {
	width: 60%;
}
.blud{
	position:relative;
	width:100%;
	float:left;
	height:5px;
	background:blue;
	border-radius:5px;
}
.bludBorder{
	position:relative;
	border:2px solid orange;
	border-radius:5px;
	width:100%;
	float:left;
	top:10px;
	left:20px;
	height:5px;
}
.result{
	width:100%;
	height: 100%;
	background:#6ac;
	display: none;
	padding: 5% 0;
	text-align: center;
}
.result button{
	margin:2%;
	display:inline;
}
.gameResult{
	letter-spacing:1rem;
	font-family: 'Dafunk_FREE';
	font-size: 2rem;
	margin:0 auto;
}
audio {
	display:none;	
}

.disable-dbl-tap-zoom {
    touch-action: manipulation;
}
	
/*-----media queries-----*/

@media (orientation: portrait) {
	.entrance {
		background-position: 90%;
	}
	.entrance h1 {
		margin: 16% 0 6%;
		transform: none;
		text-align: center;
	}
	.entrance .entranceButtons {
		display: grid;
		padding: 0;
	}
	button {
		margin: 4% auto;
		padding: 2%;
		width: 70%;
	}
	.creditsPage ul{
		padding: 0;
		width: 100%;
	}
	.creditsPage ul li{
    	padding: 2% 0;
		font-size: 1.5rem;
		justify-content: flex-start;
		width: 100%;
	}
	.creditsPage ul li img {
		width: 17%;
		height: 17%;
		margin: 0 5%;
	}
	.helpPage img{
		width: 100%;
	}
	.helpPage .back{
		margin: 5% auto;
	}
	.intro {
		font-size: 1.35rem;
		font-family: 'Dafunk_FREE';
	}
	.intro span[data-name=Rajeshwar] {
		left: 7%;
	}
	.intro span[data-name=Chinna] {
		top: 40%;
	}
	.intro span[data-name=Presents] {
		top: 45%;
		font-size: 1rem;
		color: inherit;
		font-family: inherit;
	}
	.gameResult{
		width: 100%;
		letter-spacing: 0.5rem;
		font-size: 1.2rem;
		line-height: 4rem;
	}
	.result button {
		width: 40%;
		padding: 1% 3%;
	}
	.gun {
		width: 41%;
		height: 13%;
	}
	.score{
		font-size: 1.5rem;
		color:#100;
	}
}

@media (orientation: landscape) and (max-height: 480px) {
	.intro {
		font-size: 1.9rem;
	}
	button {
		font-size: 0.8rem;
		width: 25%;
	}
	button:hover {
		font-size: 0.9rem;
	}
	.entrance h1 {
		font-size: 1.5rem;
		margin: 8% 0 0 8%;
	}
	.entrance .entranceButtons {
		padding: 5% 0 0 8%;
	}
	.creditsPage ul {
		padding: 1% 0;
	}
	.creditsPage ul li {
		padding: 2%;
		font-size: 1.5rem;
	}
	.creditsPage ul li img {
		width: 60px;
		height: 60px;
		margin: 0 10px 0 0;
	}
	.result {
		padding-top: 5%;
	}
	.result button{
		width: 20%;
	}
	.gameResult{
		width: 100%;
	}
	
}