@font-face{
	src:url("EraserRegular.ttf");
	font-family:"EraserRegular";
}
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	font-family:oblique;
	font-family:"EraserRegular";
}

html{
	width:100%;
	height:100%;
	-webkit-width:100%;
	-webkit-height:100%;
	background-size:cover;
	-webkit-background-size:cover;
	overflow-y:hidden;
	-webkit-overflow-scrolling:touch;
	background-image:url(b.jpeg);
	background-position:top;
	background-repeat:no-repeat;
	background-color:#000;

}

body{
	background:100%;
}


.game-pad{
	text-align:center;
	position:absolute;
	background-color:rgba(0,0,0,.7);
	width:100%;
	height:100%;
	-webkit-width:100%;
	-webkit-height:100%;
	display:grid;
	grid-template-areas:
	". x x x ."
	". a b c ."
	". d e f ."
	". g h i ."
	;
	-webkit-grid-template-areas:
	". x x x ."
	". a b c ."
	". d e f ."
	". g h i ."
	;

	grid-template-columns: 10% 26.6% 26.6% 26.6% 10%;
	grid-template-rows:10% 30% 30% 30%; 
	-webkit-grid-template-columns: 10% 26.6% 26.6% 26.6% 10%;
	-webkit-grid-template-rows:10% 30% 30% 30%; 
	overflow-y:scroll;
	-webkit-overflow-scrolling:touch;
}


.top{
	position:relative;
	font-size:1.5rem;
	display:flex;
	grid-area:x;
	-webkit-grid-area:x;
	text-align:center;
	justify-content:center;
	-webkit-justify-content:center;
}

.top a{
	display:flex;
	cursor:pointer;
	-webkit-text-stroke:.2px #000;
	z-index:3;
	padding-left:2%;
	font-weight:bolder;
	color:lightseagreen;
	-webkit-text-fill-color:lightseagreen;

}



.one{grid-area:a;-webkit-grid-area:a;}
.two{grid-area:b;-webkit-grid-area:b;}
.three{grid-area:c;-webkit-grid-area:c;}
.four{grid-area:d;-webkit-grid-area:d;}
.five{grid-area:e;-webkit-grid-area:e;}
.six{grid-area:f;-webkit-grid-area:f;}
.seven{grid-area:g;-webkit-grid-area:g;}
.eight{grid-area:h;-webkit-grid-area:h;}
.nine{grid-area:i;-webkit-grid-area:i;}
.two:hover,.three:hover,.four:hover,.five:hover,
.six:hover,.seven:hover,.eight:hover,.nine:hover,
.one:hover{border:2px azure;text-shadow:0 0 10px azure;}





@media screen and (max-width:500px){
	.game-pad{
		grid-template-areas:
	"x x x"
	". .  ."
	" a b c "
	"d e f"
	"g h i"

	;

	-webkit-grid-template-areas:
	"x x x"
	". .  ."
	" a b c "
	"d e f"
	"g h i"

	;
	grid-template-columns:auto auto auto;
	grid-template-rows:10% 30% 20% 20% 20%; 
	-webkit-grid-template-columns:auto auto auto;
	-webkit-grid-template-rows:10% 30% 20% 20% 20%; 
		font-size:2rem;

	}

	.top{
		font-size:1rem;
		flex-direction:row;
		-webkit-flex-direction:row;
		text-align:center;
		justify-content:center;
		-webkit-justify-content:center;

	}
}


@media screen and (max-width:900px) and (max-height:500px)and (min-width:501px){
	.game-pad{
		grid-template-areas:
	"x x x x x"
	". . . .  ."
	".  a b c  ."
	". d e f ."
	". g h i ."
	". . . . ."

	;

	-webkit-grid-template-areas:
	"x x x x x"
	". . . .  ."
	".  a b c  ."
	". d e f ."
	". g h i ."
	". . . . ."

	;
	grid-template-columns:5% auto auto auto 5%;
	grid-template-rows:10% 15% 20% 20% 20% 15%; 
	-webkit-grid-template-columns:5% auto auto auto 5%;
	-webkit-grid-template-rows:10% 15% 20% 20% 20% 15%; 
		font-size:1.8rem;
	.top{
		font-size:1.5rem;

	}

	.top a:nth-child(even){
		padding:0% 10%;
	}
}


@media screen and (max-width:800px) and (max-height:1050px) and (min-width:900px){
	.game-pad{
		grid-template-areas:
	". x x x ."
	". . . . ."
	". a b c ."
	". d e f ."
	". g h i ."
	". . . . ."
	;

	-webkit-grid-template-areas:
	". x x x ."
	". . . . ."
	". a b c ."
	". d e f ."
	". g h i ."
	". . . . ."
	;
	grid-template-columns:12.5% 25% 25% 25% 12.5%;
	grid-template-rows:10% 15% 20% 20% 20% 15%; 
	-webkit-grid-template-columns:12.5% 25% 25% 25% 12.5%;
	-webkit-grid-template-rows:10% 15% 20% 20% 20% 15%; 
	}

	.top{
		font-size:1.7rem;

	}

	.top a:nth-child(even){
		padding:0% 10%;
	}
}