body {
			font-family: 'Dancing Script', cursive;
			font-weight: 400;
			font-size: 25px;
			background-color: 	#cbf6ff;
		}

.container {
			max-width: 700px;
			margin: 1em auto;
			text-align: center;
		}

h1 {	font-size: 50px;
		}

span.red {
			color: red;
			font-weight: 700;
		}

span.blue {
			color: blue;
			font-weight: 700;
		}

.button {
			width: 150px;
			height: 30;
			border-radius: 5px;
			padding: 0px;
			margin: 0 auto;

			cursor: pointer;
			text-align: center;

			background-color: blue;
			font-size: 35px;
			color: #fff;
		}

.tic-tac-toe {
			width: 315px;
			height: auto;
			margin: 0 auto;
		}

.tile {
			height: 100px;
			width: 100px;
			display: inline-block;
			cursor: pointer;

			position: relative;
			vertical-align: top;


			padding: 15px;
			margin-bottom: 5px;
			box-sizing: border-box;

			color: #fff;
			font-size: 60px;
			text-align: center;
		}

.free {
			background-color:		#f7c331
		}

.O-play {
			background-color: blue;
		}

.X-play {
			background-color: red;
		}

#winMessage {
	display: none;
	text-align: center;
	font-size: 40px;
	color: red;
}

#loseMessage{
	display: none;
	text-align: center;
	font-size: 40px;
	color: blue;
}

#drawMessage{
	display: none;
	text-align: center;
	font-size: 40px;
}

#playedSquare{
	display: none;
	text-align: center;
	font-size: 40px;
}