amjohnson38/index.html

## index.html
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Place Title Here</title>
</head>
<body>
    <div id='resetContainer' class='popupContainer'>
        <div id="resetGameBox" class="popUp">
            <h3 id="endOfGameStatement"></h3>
            <button id="reset" type="button" class="btn btn-primary btn-lg">Play Again<a href=#></a></button>
        </div>
    </div>

    <div id='startContainer' class='popupContainer'>
        <div id="startGameBox" class="popUp">
            <h3> X or O?</h3>
            <button id="X" type="button" class="btn btn-hot text-uppercase">x<a href=#></a></button>
            <button id="O" type="button" class="btn btn-hot text-uppercase">o<a href=#></a></button>
        </div>
    </div>

    <div id="veil" class="animated">

    </div>
    <div id="content">
        <div id="titleContainer" class="container">
            <div id="title" class="text-center">
                <h1> TIC TAC TOE</h1>
            </div>

        </div>
        <div id="gameBoardContainer">
            <div id="gameboard">
                <div id="0" class="square">
                </div>
                <div id="1" class="square">
                </div>
                <div id="2" class="square">
                </div>

                <div id="3" class="square">
                </div>
                <div id="4" class="square">
                </div>
                <div id="5" class="square">
                </div>


                <div id="6" class="square">
                </div>
                <div id="7" class="square">
                </div>
                <div id="8" class="square">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

## script.js
var counter = 0;
var playersSymbol = " ";
var computersSymbol;
var gamePosArr = [];
var computerWinsSound = new Audio("http://res.cloudinary.com/angiemjohnson/video/upload/v1470535194/244453__milton__dramatic-robot-1_asbcxg.mp3")
var playerWinMusic = new Audio("http://res.cloudinary.com/angiemjohnson/video/upload/v1470534745/99636__tomlija__small-crowd-yelling-yeah_vfzbpp.wav")
var startGameMusic = new Audio("http://res.cloudinary.com/angiemjohnson/raw/upload/v1469732205/Shall-we-play-a-game_unines.mp3");
var endGameMusic = new Audio("http://res.cloudinary.com/angiemjohnson/raw/upload/v1469733568/Game-over-sound-effect_d4gfjm.mp3");
var squareClickSound = new Audio("https://res.cloudinary.com/angiemjohnson/video/upload/v1470534191/233539__oceanictrancer__click_thltr7.wav")
var computerMovesSound = new Audio("http://res.cloudinary.com/angiemjohnson/video/upload/v1470534454/316874__dtrostli__tr-dhita-cymbal02_fifx1l.wav")
$(function() {

	// force board to be a square
	var div = $('#gameboard');
	var width = div.width();
	div.css('height', width);

	// re-force board to be a square everytime the window is resized
	$(window).resize(function() {
		var div = $('#gameboard');
		var width = div.width();
		div.css('height', width);
	});

	init();

	$("#X").on("click", function() {
		playersSymbol = "X";
		computersSymbol = "O";
		// make the game board available for play
		playGame();

	});

	$("#O").on("click", function() {
		playersSymbol = "O";
		computersSymbol = "X";

		// make the game board available for play
		playGame();

		gamePosArr[4] = "X";
		$("#4").addClass("X");
		computerMovesSound.play();
	});

	//.one allows the click event to only happen once per square so that there's not multiple Xs or Os in the squares.
	$(".square").on("click", function(eventData) {
		console.log("square clicked");

		//checks to see if the div has an "X" or "o" class so that multiples will not be added after the initial click is done.
		if (eventData.currentTarget.className.indexOf("X") !== -1 || eventData.currentTarget.className.indexOf("O") !== -1) {
			console.log("This Square Is Occupied");
		} else {
			// ensure the game is not already over before allowing the user to click a square
			if (checkForWinner(gamePosArr) !== true) {

								selectSquare(eventData.currentTarget.id, playersSymbol);

				if (checkForWinner(gamePosArr) === true) {
					endGame(playersSymbol + " Wins!");
					playerWinMusic.play();
				} else if (gamePosArr.filter(function(value) {
						return value !== undefined
					}).length >= 9) {
					endGame("Game Is A Draw");
					endGameMusic.play();
				} else {
					computerMoves();
					// arr is the empty arr that is housing the Xs and Os that have been clicked by the players. if arr has 9 Xs and/or Os, the game is a draw because there are no more moves that can be made.

					if (gamePosArr.filter(function(value) {
							return value !== undefined
						}).length >= 9) {
						endGame("Game Is A Draw");
						endGameMusic.play();
					}
				}
			}
		}
	});

	$("#reset").on("click", function() {
		$("#resetContainer").removeClass('slideDown');
		$("#resetContainer").addClass('slideUp');

		init();

		$(".square").removeClass("X O");
		gamePosArr = [];
	});

});

function selectSquare(id, player) {
	$("#" + id).toggleClass(player);
	gamePosArr[id] = player;
	squareClickSound.play();

	/*console.log(gamePosArr);*/
}

function init() {
	startGameMusic.play();
	$('#startContainer').removeClass('slideUp');
	$('#startContainer').addClass('slideDown');

	$('#veil').removeClass('fadeOut');
	$('#veil').addClass('fadeIn');

}

function playGame() {
	$('#startContainer').removeClass('slideDown');
	$('#startContainer').addClass('slideUp');

	$('#veil').removeClass('fadeIn');
	$('#veil').addClass('fadeOut');
}

//array is being passed to be checked by the function to see if a player(computer or human) is a winner.
//player is either the computer or the human that is playing

function checkForWinner(array) {
	if ((array[0] == array[1] && array[1] == array[2] && array[0] !== undefined) ||
		(array[3] == array[4] && array[4] == array[5] && array[3] !== undefined) ||
		(array[6] == array[7] && array[7] == array[8] && array[6] !== undefined)) {
		return true;
	}
	if ((array[0] == array[3] && array[3] == array[6] && array[0] !== undefined) ||
		(array[1] == array[4] && array[4] == array[7] && array[1] !== undefined) ||
		(array[2] == array[5] && array[5] == array[8] && array[2] !== undefined)) {
		return true;
	}
	if ((array[0] == array[4] && array[4] == array[8] && array[0] !== undefined) ||
		(array[2] == array[4] && array[4] == array[6] && array[2] !== undefined)) {
		return true;
	} else {
		return false;
	}
}

function endGame(message) {

	$("#resetContainer").removeClass('slideUp');
	$("#endOfGameStatement").text(message);
	$("#resetContainer").addClass('slideDown');
}
//
function computerMoves() {
	computerMovesSound.play();
	//loops through all the possible
	for (var i = 0; i < 9; i++) {
		if ($("#" + i).hasClass("X") !== true && $("#" + i).hasClass("O") !== true) {

			var tempArr = gamePosArr.slice(0);
			tempArr[i] = computersSymbol;
			if (checkForWinner(tempArr) === true) {
				selectSquare(i, computersSymbol);
				endGame(computersSymbol + " Wins!");
				computerWinsSound.play();
				return;
			}

		}
	}
	for (var i = 0; i < 9; i++) {
		if ($("#" + i).hasClass("X") !== true && $("#" + i).hasClass("O") !== true) {
			var tempArr = gamePosArr.slice(0);
			tempArr[i] = playersSymbol;
			if (checkForWinner(tempArr) === true) {
				selectSquare(i, computersSymbol);
				return;
			}
		}
	}
	if (gamePosArr[4] === undefined) {
		gamePosArr[4] = computersSymbol;
		$("#4").addClass(computersSymbol);
		return;
	}

	if (playersSymbol === "X" && gamePosArr[0] === undefined) {
		gamePosArr[0] = "O";
		$("#0").addClass("O");
		return;
	}
/*The section is for when the computer can't win or block the human player.
 The computer has to checks all the squares and put it's symbol in an available square*/
	var randomSquareSelected;
	do {
		randomSquareSelected = Math.floor((Math.random() * 8) + 0);
	}
	while ($("#" + randomSquareSelected).hasClass("X") || $("#" + randomSquareSelected).hasClass("O"));
	selectSquare(randomSquareSelected, computersSymbol);

}

## scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

## style.css
* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #5F6887;
	background-image: url("https://www.transparenttextures.com/patterns/circles.png");
}

h1 {
	margin-top: 5px;
	margin-bottom: 20px;
	font-family: 'Anton' sans-serif;
	font-size: 10vh;
	font-weight: 400;
	text-align: center;
	letter-spacing: 5px;
	-webkit-text-stroke: 1px black;
	color: white;
	text-shadow: 3px 3px 0 #2B3A45, -1px -1px 0 #2B3A45, 1px -1px 0 #2B3A45, -1px 1px 0 #2B3A45, 1px 1px 0 #2B3A45;
	animation-duration: 3s;
	animation-name: slidein;
}

@keyframes slidein {
	from {
		margin-left: 100%;
		width: 300%;
	}
	to {
		margin-left: 0%;
		width: 100%;
	}
}

.btn {
	margin: 4px;
	box-shadow: 1px 1px 5px #888888;
}

.btn-hot {
	background-color: #385F96;
	border-bottom: 2px solid #2B3A45;
	width: 40px;
	height: 40px;
	font-weight: bold;
	font-size: 20px;
	margin: 20px;
	color: white;
}

.btn-hot:active {
	color: #fff;
	background-color: #385F96;
	border-top: 2px solid #2B3A45;
	margin-top: 2px;
}

#playerSelection {
	text-align: center;
	width: 25%;
	margin-top: 200px;
	float: left;
}

h3 {
	color: navy;
	font-weight: bold;
	font-size: 25px;
	text-align: center;
	font-family: "Lato", sans-serif;
}

.popupContainer,
#gameBoardContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.popupContainer {
	position: fixed;
	z-index: 5;
	width: 100%;
	height: 100%;
	top: -100%;
}

#content {
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

#gameBoardContainer {
	flex-grow: 1;
}

#gameboard {
	background-color: #485789;
	border: 1px solid black;
	-webkit-box-shadow: 1px 1px 21px 6px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 1px 1px 21px 6px rgba(0, 0, 0, 0.75);
	box-shadow: 1px 1px 21px 6px rgba(0, 0, 0, 0.75);
	width: 80vh;
}

.square {
	float: left;
	position: relative;
	width: 30%;
	height: 30%;
	/*padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
	margin: 1.66%;
	background-color: white;
	display: flex;
	justify-content: center;
	/* align horizontal */
	align-items: center;
	/* align vertical */
	cursor: pointer;
}

#resetGameBox {
	flex-direction: column;
	display: flex;
}

.X {
	background-color: #FB3953;
	font-weight: bold;
	-webkit-animation: fadein 1s;
	/* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 1s;
	/* Firefox < 16 */
	-ms-animation: fadein 1s;
	/* Internet Explorer */
	-o-animation: fadein 1s;
	/* Opera < 12.1 */
	animation: fadein 1s;
}

.X::before {
	content: "X";
}

.O {
	background-color: lightblue;
	font-weight: bold;
	-webkit-animation: fadein 1s;
	-moz-animation: fadein 1s;
	-ms-animation: fadein 1s;
	-o-animation: fadein 1s;
	animation: fadein 1s;
	content: "O";
}


/*generates content in an element */

.O::before {
	content: "O";
}

.O,
.X {
	font-size: 500%;
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}


/* Firefox < 16 */

@-moz-keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}


/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}


/* Internet Explorer */

@-ms-keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}


/* Opera < 12.1 */

@-o-keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.slideDown {
	animation: slideDown 4s;
	animation-fill-mode: forwards;
}

.slideUp {
	animation: slideUp 2s;
	animation-fill-mode: forwards;
}

@keyframes slideDown {
	from {
		top: -100%;
	}
	to {
		top: 0%;
	}
}

@keyframes slideUp {
	from {
		top: 0%;
	}
	to {
		top: -100%;
	}
}

.popUp {
	background: rgba(255, 255, 255, 0.7);
	padding: 1em 5em;
	-webkit-border-radius: 5px;
	-moz-border-radius-: 5px;
	border-radius: 5px;
	z-index: 5;
}

#endOfGameStatement {
	color: navy;
	font-weight: bold;
}

#reset {
	font-size: 15px;
	padding: 10px;
	/*
 margin:20px;*/
}

#veil {
	z-index: 2;
	overflow: hidden;
	margin: 0;
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: -50%;
	bottom: 0;
	right: 0;
	left: 0;
	pointer-events: none;
}

.fadeOut {
	animation: fadeOut 2s;
	animation-fill-mode: forwards;
	/* keeps the animation from resetting after it runs*/
}

.fadeIn {
	animation: fadeIn 2s;
	animation-fill-mode: forwards;
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

## styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />

## tic-tac-toe.markdown

      
    Raw
  

              tic-tac-toe.markdown
            
          
    Tic Tac Toe

A Pen by  Angela Johnson on CodePen.
License.
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Place Title Here</title>
	</head>
	<body>
	<div id='resetContainer' class='popupContainer'>
	<div id="resetGameBox" class="popUp">
	<h3 id="endOfGameStatement"></h3>
	<button id="reset" type="button" class="btn btn-primary btn-lg">Play Again<a href=#></a></button>
	</div>
	</div>

	<div id='startContainer' class='popupContainer'>
	<div id="startGameBox" class="popUp">
	<h3> X or O?</h3>
	<button id="X" type="button" class="btn btn-hot text-uppercase">x<a href=#></a></button>
	<button id="O" type="button" class="btn btn-hot text-uppercase">o<a href=#></a></button>
	</div>
	</div>

	<div id="veil" class="animated">

	</div>
	<div id="content">
	<div id="titleContainer" class="container">
	<div id="title" class="text-center">
	<h1> TIC TAC TOE</h1>
	</div>

	</div>
	<div id="gameBoardContainer">
	<div id="gameboard">
	<div id="0" class="square">
	</div>
	<div id="1" class="square">
	</div>
	<div id="2" class="square">
	</div>

	<div id="3" class="square">
	</div>
	<div id="4" class="square">
	</div>
	<div id="5" class="square">
	</div>


	<div id="6" class="square">
	</div>
	<div id="7" class="square">
	</div>
	<div id="8" class="square">
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>
	var counter = 0;
	var playersSymbol = " ";
	var computersSymbol;
	var gamePosArr = [];
	var computerWinsSound = new Audio("http://res.cloudinary.com/angiemjohnson/video/upload/v1470535194/244453__milton__dramatic-robot-1_asbcxg.mp3")
	var playerWinMusic = new Audio("http://res.cloudinary.com/angiemjohnson/video/upload/v1470534745/99636__tomlija__small-crowd-yelling-yeah_vfzbpp.wav")
	var startGameMusic = new Audio("http://res.cloudinary.com/angiemjohnson/raw/upload/v1469732205/Shall-we-play-a-game_unines.mp3");
	var endGameMusic = new Audio("http://res.cloudinary.com/angiemjohnson/raw/upload/v1469733568/Game-over-sound-effect_d4gfjm.mp3");
	var squareClickSound = new Audio("https://res.cloudinary.com/angiemjohnson/video/upload/v1470534191/233539__oceanictrancer__click_thltr7.wav")
	var computerMovesSound = new Audio("http://res.cloudinary.com/angiemjohnson/video/upload/v1470534454/316874__dtrostli__tr-dhita-cymbal02_fifx1l.wav")
	$(function() {

	// force board to be a square
	var div = $('#gameboard');
	var width = div.width();
	div.css('height', width);

	// re-force board to be a square everytime the window is resized
	$(window).resize(function() {
	var div = $('#gameboard');
	var width = div.width();
	div.css('height', width);
	});

	init();

	$("#X").on("click", function() {
	playersSymbol = "X";
	computersSymbol = "O";
	// make the game board available for play
	playGame();

	});

	$("#O").on("click", function() {
	playersSymbol = "O";
	computersSymbol = "X";

	// make the game board available for play
	playGame();

	gamePosArr[4] = "X";
	$("#4").addClass("X");
	computerMovesSound.play();
	});

	//.one allows the click event to only happen once per square so that there's not multiple Xs or Os in the squares.
	$(".square").on("click", function(eventData) {
	console.log("square clicked");

	//checks to see if the div has an "X" or "o" class so that multiples will not be added after the initial click is done.
	if (eventData.currentTarget.className.indexOf("X") !== -1 \|\| eventData.currentTarget.className.indexOf("O") !== -1) {
	console.log("This Square Is Occupied");
	} else {
	// ensure the game is not already over before allowing the user to click a square
	if (checkForWinner(gamePosArr) !== true) {

	selectSquare(eventData.currentTarget.id, playersSymbol);

	if (checkForWinner(gamePosArr) === true) {
	endGame(playersSymbol + " Wins!");
	playerWinMusic.play();
	} else if (gamePosArr.filter(function(value) {
	return value !== undefined
	}).length >= 9) {
	endGame("Game Is A Draw");
	endGameMusic.play();
	} else {
	computerMoves();
	// arr is the empty arr that is housing the Xs and Os that have been clicked by the players. if arr has 9 Xs and/or Os, the game is a draw because there are no more moves that can be made.

	if (gamePosArr.filter(function(value) {
	return value !== undefined
	}).length >= 9) {
	endGame("Game Is A Draw");
	endGameMusic.play();
	}
	}
	}
	}
	});

	$("#reset").on("click", function() {
	$("#resetContainer").removeClass('slideDown');
	$("#resetContainer").addClass('slideUp');

	init();

	$(".square").removeClass("X O");
	gamePosArr = [];
	});

	});

	function selectSquare(id, player) {
	$("#" + id).toggleClass(player);
	gamePosArr[id] = player;
	squareClickSound.play();

	/console.log(gamePosArr);/
	}

	function init() {
	startGameMusic.play();
	$('#startContainer').removeClass('slideUp');
	$('#startContainer').addClass('slideDown');

	$('#veil').removeClass('fadeOut');
	$('#veil').addClass('fadeIn');

	}

	function playGame() {
	$('#startContainer').removeClass('slideDown');
	$('#startContainer').addClass('slideUp');

	$('#veil').removeClass('fadeIn');
	$('#veil').addClass('fadeOut');
	}

	//array is being passed to be checked by the function to see if a player(computer or human) is a winner.
	//player is either the computer or the human that is playing

	function checkForWinner(array) {
	if ((array[0] == array[1] && array[1] == array[2] && array[0] !== undefined) \|\|
	(array[3] == array[4] && array[4] == array[5] && array[3] !== undefined) \|\|
	(array[6] == array[7] && array[7] == array[8] && array[6] !== undefined)) {
	return true;
	}
	if ((array[0] == array[3] && array[3] == array[6] && array[0] !== undefined) \|\|
	(array[1] == array[4] && array[4] == array[7] && array[1] !== undefined) \|\|
	(array[2] == array[5] && array[5] == array[8] && array[2] !== undefined)) {
	return true;
	}
	if ((array[0] == array[4] && array[4] == array[8] && array[0] !== undefined) \|\|
	(array[2] == array[4] && array[4] == array[6] && array[2] !== undefined)) {
	return true;
	} else {
	return false;
	}
	}

	function endGame(message) {

	$("#resetContainer").removeClass('slideUp');
	$("#endOfGameStatement").text(message);
	$("#resetContainer").addClass('slideDown');
	}
	//
	function computerMoves() {
	computerMovesSound.play();
	//loops through all the possible
	for (var i = 0; i < 9; i++) {
	if ($("#" + i).hasClass("X") !== true && $("#" + i).hasClass("O") !== true) {

	var tempArr = gamePosArr.slice(0);
	tempArr[i] = computersSymbol;
	if (checkForWinner(tempArr) === true) {
	selectSquare(i, computersSymbol);
	endGame(computersSymbol + " Wins!");
	computerWinsSound.play();
	return;
	}

	}
	}
	for (var i = 0; i < 9; i++) {
	if ($("#" + i).hasClass("X") !== true && $("#" + i).hasClass("O") !== true) {
	var tempArr = gamePosArr.slice(0);
	tempArr[i] = playersSymbol;
	if (checkForWinner(tempArr) === true) {
	selectSquare(i, computersSymbol);
	return;
	}
	}
	}
	if (gamePosArr[4] === undefined) {
	gamePosArr[4] = computersSymbol;
	$("#4").addClass(computersSymbol);
	return;
	}

	if (playersSymbol === "X" && gamePosArr[0] === undefined) {
	gamePosArr[0] = "O";
	$("#0").addClass("O");
	return;
	}
	/*The section is for when the computer can't win or block the human player.
	The computer has to checks all the squares and put it's symbol in an available square*/
	var randomSquareSelected;
	do {
	randomSquareSelected = Math.floor((Math.random() * 8) + 0);
	}
	while ($("#" + randomSquareSelected).hasClass("X") \|\| $("#" + randomSquareSelected).hasClass("O"));
	selectSquare(randomSquareSelected, computersSymbol);

	}
	* {
	margin: 0;
	padding: 0;
	}

	body {
	background-color: #5F6887;
	background-image: url("https://www.transparenttextures.com/patterns/circles.png");
	}

	h1 {
	margin-top: 5px;
	margin-bottom: 20px;
	font-family: 'Anton' sans-serif;
	font-size: 10vh;
	font-weight: 400;
	text-align: center;
	letter-spacing: 5px;
	-webkit-text-stroke: 1px black;
	color: white;
	text-shadow: 3px 3px 0 #2B3A45, -1px -1px 0 #2B3A45, 1px -1px 0 #2B3A45, -1px 1px 0 #2B3A45, 1px 1px 0 #2B3A45;
	animation-duration: 3s;
	animation-name: slidein;
	}

	@keyframes slidein {
	from {
	margin-left: 100%;
	width: 300%;
	}
	to {
	margin-left: 0%;
	width: 100%;
	}
	}

	.btn {
	margin: 4px;
	box-shadow: 1px 1px 5px #888888;
	}

	.btn-hot {
	background-color: #385F96;
	border-bottom: 2px solid #2B3A45;
	width: 40px;
	height: 40px;
	font-weight: bold;
	font-size: 20px;
	margin: 20px;
	color: white;
	}

	.btn-hot:active {
	color: #fff;
	background-color: #385F96;
	border-top: 2px solid #2B3A45;
	margin-top: 2px;
	}

	#playerSelection {
	text-align: center;
	width: 25%;
	margin-top: 200px;
	float: left;
	}

	h3 {
	color: navy;
	font-weight: bold;
	font-size: 25px;
	text-align: center;
	font-family: "Lato", sans-serif;
	}

	.popupContainer,
	#gameBoardContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin: 0;
	}

	.popupContainer {
	position: fixed;
	z-index: 5;
	width: 100%;
	height: 100%;
	top: -100%;
	}

	#content {
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}

	#gameBoardContainer {
	flex-grow: 1;
	}

	#gameboard {
	background-color: #485789;
	border: 1px solid black;
	-webkit-box-shadow: 1px 1px 21px 6px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 1px 1px 21px 6px rgba(0, 0, 0, 0.75);
	box-shadow: 1px 1px 21px 6px rgba(0, 0, 0, 0.75);
	width: 80vh;
	}

	.square {
	float: left;
	position: relative;
	width: 30%;
	height: 30%;
	/padding-bottom: 30%; / = width for a 1:1 aspect ratio */
	margin: 1.66%;
	background-color: white;
	display: flex;
	justify-content: center;
	/* align horizontal */
	align-items: center;
	/* align vertical */
	cursor: pointer;
	}

	#resetGameBox {
	flex-direction: column;
	display: flex;
	}

	.X {
	background-color: #FB3953;
	font-weight: bold;
	-webkit-animation: fadein 1s;
	/* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 1s;
	/* Firefox < 16 */
	-ms-animation: fadein 1s;
	/* Internet Explorer */
	-o-animation: fadein 1s;
	/* Opera < 12.1 */
	animation: fadein 1s;
	}

	.X::before {
	content: "X";
	}

	.O {
	background-color: lightblue;
	font-weight: bold;
	-webkit-animation: fadein 1s;
	-moz-animation: fadein 1s;
	-ms-animation: fadein 1s;
	-o-animation: fadein 1s;
	animation: fadein 1s;
	content: "O";
	}


	/generates content in an element /

	.O::before {
	content: "O";
	}

	.O,
	.X {
	font-size: 500%;
	}

	@keyframes fadein {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}


	/* Firefox < 16 */

	@-moz-keyframes fadein {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}


	/* Safari, Chrome and Opera > 12.1 */

	@-webkit-keyframes fadein {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}


	/* Internet Explorer */

	@-ms-keyframes fadein {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}


	/* Opera < 12.1 */

	@-o-keyframes fadein {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}

	.slideDown {
	animation: slideDown 4s;
	animation-fill-mode: forwards;
	}

	.slideUp {
	animation: slideUp 2s;
	animation-fill-mode: forwards;
	}

	@keyframes slideDown {
	from {
	top: -100%;
	}
	to {
	top: 0%;
	}
	}

	@keyframes slideUp {
	from {
	top: 0%;
	}
	to {
	top: -100%;
	}
	}

	.popUp {
	background: rgba(255, 255, 255, 0.7);
	padding: 1em 5em;
	-webkit-border-radius: 5px;
	-moz-border-radius-: 5px;
	border-radius: 5px;
	z-index: 5;
	}

	#endOfGameStatement {
	color: navy;
	font-weight: bold;
	}

	#reset {
	font-size: 15px;
	padding: 10px;
	/*
	margin:20px;*/
	}

	#veil {
	z-index: 2;
	overflow: hidden;
	margin: 0;
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: -50%;
	bottom: 0;
	right: 0;
	left: 0;
	pointer-events: none;
	}

	.fadeOut {
	animation: fadeOut 2s;
	animation-fill-mode: forwards;
	/* keeps the animation from resetting after it runs*/
	}

	.fadeIn {
	animation: fadeIn 2s;
	animation-fill-mode: forwards;
	}

	@keyframes fadeOut {
	from {
	opacity: 1;
	}
	to {
	opacity: 0;
	}
	}

	@keyframes fadeIn {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />