* {
	box-sizing:border-box;
}
body {
	background-color: #222;
	width:100%;
	max-width:500px;
	padding: 0 20px;
	margin: 0 auto;
	font: 20px arial;
	text-align:center;
	color: #ccc;
}
h1 {
	font-size:32px;
	width:100%;
	margin:20px auto;
	color: #000;
	font-size: 1.5em;
	font-weight: 700;
}
canvas {
	background-image: url("img/tttBoard2.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.container {
	background-image: url("img/bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	width: 600px;
	padding: 0 50px 50px 25px;
	margin: 0 auto;
}
#game,#reset {
	margin: 20px auto 0;
	display: block;
	width:100%;
}
#scoreboard {
	background-image: url("img/score.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	border:2px solid #ccc;
	width:100%;
	margin:10px auto;
	padding:10px;
	color: #000;
	font-size: 1.5em;
	font-weight: 700;
	line-height: 74px;
	

}
ul {
	display:flex;
	list-style:none;
	margin:0;
	padding:0;
	width:100%;
}
li {
	margin:0;
	padding:0;
	flex-grow:1;
	box-shadow: 2px 2px 2px 1px rgba(255,255,255,0.1),
}
button {
	border:1px solid #ccc;
	background:#fefefe;
	padding:7px 14px;
	margin:10px 20px;
	color: #654321;
}
#playerOne, #playerTwo {
	width: 50px;
	height: 50px;
}
.button {
 position: relative;
 border: none;
 display: inline-block;
 box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.2),
       inset 0px -5px 0px 0px rgba(0,0,0,0.3),
    inset 0px 2px 0px 0px rgba(255,255,255,0.5);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 overflow: hidden;
 cursor: pointer;
}
.button:active {
 box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.2),
       inset 0px -2px 0px 0px rgba(0,0,0,0.3),
    inset 0px 2px 0px 0px rgba(255,255,255,0.5);
 top: 3px;
}
.button div {
 padding: 10px 20px 12px 20px;
 color: rgba(0,0,0,0.7);
 text-shadow: 1px 1px 0px rgba(255,255,255,0.4);
}
.button:active div {
 padding-bottom: 9px;
}
.wood {
 background: url("img/wood_pattern.png");
}