*{margin: 0;padding: 0}
html, body{height: 100%;width: 100%;}
#gamePanel {display: flex;flex-direction: column;justify-content: center;height: 100%;width: 100%;background: #222222;color: #fff;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;-o-user-select: none;user-select: none;}
#gamePanel *{box-sizing:initial;}
#gamePanel header{display: block;margin:0 auto;width: 100%;text-align: center;padding-top: 20px;}
#gamePanel header h1{font-family: Arial;font-size: 40px;font-weight: bold;}
#gamePanel header #newGameBtn{display: block;margin: 20px auto; width: 100px;padding: 15px;background-color: #3f3f3f;font-family: Arial;color: #fff;border-radius: 10px;text-decoration: none;}
#gamePanel header #newGameBtn:hover{background-color: #3f3f3f;}
#gamePanel header p{font-family: Arial;font-size: 20px;margin: 15px auto;}

#gamePanel #grid-container{width: 460px;height: 460px;padding: 20px;margin: 20px auto;background-color: #3a3a3a;border-radius: 10px;position: relative;}
#gamePanel .grid-cell{width: 140px;height: 140px;border-radius: 6px;background-color: #3f3f3f;position: absolute;}
#gamePanel .number-cell{border-radius: 6px; font-family: Arial;font-weight: bold;font-size: 60px;line-height: 100px;text-align: center;position: absolute;color:#fff;}
#gamePanel .number-cell:after{content: '';position: absolute;left: 0;bottom: 0;width: 100%;height: 12%;border-radius: 13px;}

#gamePanel .clickCell{animation-name: clickCell;-webkit-animation-name: clickCell;animation-duration: 0.2s;-webkit-animation-duration: 0.2s;}
@-webkit-keyframes clickCell{
	0%{
		-webkit-transform: scale(1.5);
		opacity : 0;
	}
	80%{
		-webkit-transform: scale(0.8);
		opacity : 1;
	}
	100%{
		-webkit-transform: scale(1);
		opacity: 1;
	}
}

@keyframes clickCell{
	0%{
		transform: scale(1.5);
		opacity: 0;
	}
	50%{
		transform: scale(0.8);
		opacity: 1;
	}
	100%{
		transform: scale(1);
		opacity: 1;
	}
}
#gamePanel .clickCell.number-cell:after{background: rgba(0,0,0,.2);};