amjohnson38/index.html

## index.html
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Simon Game</title>
</head>
<body>
	<div id="resetContainer" class="popupContainer">
		<div id="gameStatementBox" class="loserPopUp">
			<h3 id="gameStatement"></h3>
		</div>
	</div>
	<div id="gameTitle">SIMON</div>
	<div id="centeringFlexBox">
		<div class="middleCircle">
			<div id="gameOptions">
				<div id="count" class="centeredRow">Level</div>
				<div class="centeredRow">
					<div id="countWindow">&nbsp</div>
				</div>
				<div id="gameControlButtons" class="centeredRow">
					<div id="start" class='gameControlButton'>
						<div id="startButtonLabel">Start</div>
						<button id="startButton" class="btn"></button>
					</div>
					<div class="led-box" class='gameControlButton'>
						<div id="led" class="led-clear"></div>
					</div>
					<div id="strict" class='gameControlButton'>
						<div id="strictButtonLabel">Strict</div>
						<button id="strictButton" class="btn"></button>
					</div>
				</div>
				<div id="powerSwitch" class="centeredRow">
					<div id="off">
						<span>Off</span>
					</div>
					<div id="on-off-mark"><span id="mark-toggle"></span></div>
					<div id="on">
						<span>On</span>
					</div>
				</div>
			</div>
		</div>
		<div id="simonContainer">
			<div class="flexContainerColumns">
				<div class="flexContainerRows">
					<div id="greenPad" class="green circle greenPadTurnOff"></div>
					<div id="redPad" class="red circle redPadTurnOff"></div>
				</div>
				<div class="flexContainerRows">
					<div id="bluePad" class="blue circle bluePadTurnOff"></div>
					<div id="yellowPad" class="yellow circle yellowPadTurnOff"></div>
				</div>
			</div>

		</div>
	</div>
	<footer>
		<div class="social text-center center-block">
			<ul>
				<li><a href="https://www.facebook.com/reggirl38"><i class="fa fa-lg fa-facebook"></i></a></li>
				<li><a href="http://twitter.com/reggirl32"><i class="fa fa-lg fa-twitter"></i></a></li>
				<li><a href="https://github.com/amjohnson38"><i class="fa fa-lg fa-github"></i></a></li>
				<li><a href="https://www.linkedin.com/in/angelamjohnson95"><i class="fa fa-lg fa-linkedin"></i></a></li>
				<li>
					<a href="https://www.freecodecamp.com/amjohnson38" target="_blank" title="See my Free Code Camp profile!">
						<i class="fa fa-fire fa-lg"></i></li>
				</a>
			</ul>
		</div>
		<p>Created and Coded by Angela Johnson 2016</p>
	</footer>
</body>

</html>

## script.js
var gameSequence = [];
var playerResponse;
var playerResponsesCounter = 0;
var strictMode = false;
var levelCount = 0;
var roundsToWin = 20;
var powerState = "off";
var gameState = "notPlaying";
var turnState = "computer";
var colors = ["greenPad", "redPad", "bluePad", "yellowPad"];
var lightUpDuration;
var lightUpStep = 50;
var lightGap;
var lightGapStep = 2;
var yellowPadSound;
var greenPadSound;
var redPadSound;
var bluePadSound;
var setTimeOutLightUp;
var setTimeOutDarken;
var timeOutArray = [];
var wrongAnswerBuzzer;
var winnerCheer;
var losingMessage = "You Lose! Press Start To Play Again.";
var winningMessage = "You Won! Press Start To Play Again";
var boolFirstPlay = true;

$(function() {
	loadSounds(); //
	W = window.innerWidth;
	H = window.innerHeight;
	$("#powerSwitch").on("click", function() {
		if (powerState === "off") {
			$("#mark-toggle").animate({
				left: "26px"
			}, 50);
			$("#countWindow").html("--");
			$("#led").addClass("led-green");
			$("#led").removeClass("led-clear");
			powerState = "on";

		} else if (powerState === "on") {
			$("#mark-toggle").animate({
				left: "0px"
			}, 50);
			powerState = "off";
			$("#countWindow").html("&nbsp");
			$("#led").removeClass("led-green");
			$("#led").removeClass("led-red");
			$("#led").addClass("led-clear");

			if ($("#resetContainer").hasClass('slideDown')) {
				$("#resetContainer").removeClass('slideDown');
				$("#resetContainer").addClass('slideUp');
			}

			init();
			//clears the setTimeout method that were set for the lightUpPad function
			for (var i = 0; i < timeOutArray.length; i++) {
				clearTimeout(timeOutArray[i]);
			}
			//clears the setTimeout method for the darkenGamePad function
			for (var i = 0; i < colors.length; i++) {
				clearTimeout(darkenGamePad(colors[i]));
			}

		}

	});

	$(".circle").mousedown(function(event) {
		if ((powerState === "on") &&
			(turnState === "player")) {
			lightUpPad(event.currentTarget.id);
		}

	});

	$(".circle").mouseup(function(event) {
		if ((powerState === "on") &&
			(turnState === "player")) {
			playerPlays(event.currentTarget.id);
			darkenGamePad(event.currentTarget.id);
		}
	});

	$("#startButton").on("click", function() {
		if (powerState === "on") {
			$(".circle").removeClass("winningAnimation");
			$(".middleCircle").removeClass("winningAnimation");
			$("#simonContainer").removeClass("losingAnimation");
			if ($("#resetContainer").hasClass('slideDown')) {
				$("#resetContainer").removeClass('slideDown');
				$("#resetContainer").addClass('slideUp');
			}
			gameState = "playing";
			computerPlays(true);
		}

	});

	$("#strictButton").on("click", function() {

		if ((powerState === "on") &&
			((turnState !== "computer") && (turnState !== "player"))) {
			strictMode = !strictMode;
			if (strictMode === true) {
				$("#led").addClass("led-red");
			} else {
				$("#led").removeClass("led-red");
				$("#led").addClass("led-clear");
			}
		}
	});
});

//chooses a random color out of the 4 colors
function chooseRandomColor() {
	var randomNumber = Math.floor(Math.random() * 4);
	/*console.log(randomNumber);*/
	var randomColor = colors[randomNumber];
	/*console.log(randomColor);*/
	return randomColor;
}
//initializes the game upon starting
function init() {
	levelCount = 1;
	console.log(levelCount);
	/*if (powerState === "on") {
	  $("#countWindow").html(levelCount);
	}*/
	gameState = "notPlaying";
	turnState = undefined; // allows the player to turn on the strict button prior to the game starting.
	darkenGamePad();
	gameSequence = [];
	playerResponsesCounter = 0;
	lightUpDuration = 1400;
	lightGap = 75;

}

function computerPlays(addNew) {
	if (levelCount > roundsToWin) {
		gameState = "playerWon";
		playerWins();
		return;
	}
	if (gameState === "playing") {
		/*console.log("*** starting Round ***");*/
		turnState = "computer";
		$("#countWindow").html(levelCount);
		//adds a new color to the sequence
		if (addNew === true) {
			color = chooseRandomColor(); //the random color that has been choosen
			gameSequence.push(color); //the color is pushed into the game sequence array
			console.log(gameSequence);
		}
		if (addNew === false) {
			$("#simonContainer").removeClass("losingAnimation");
		}

		lightUpDuration = lightUpDuration - lightUpStep; //the length of time the pad stays illuminated
		lightGap = lightGap - lightGapStep; //the time between a light turning off and the next light turning on
		timeOutArray = []; //emptying of the timeOutArray
		//the gameSequence array is looped through and the current color to be animated is selected.
		for (var i = 0; i < gameSequence.length; i++) {
			var currentColor = gameSequence[i];
			var setTimeOutLightUp = setTimeout(lightUpPad.bind(null, gameSequence[i]), lightUpDuration * i);
			var setTimeOutDarken = setTimeout(darkenGamePad.bind(null, gameSequence[i]),
				lightUpDuration * (i + 1) - lightGap);
			timeOutArray.push(setTimeOutLightUp, setTimeOutDarken);

		}
		setTimeout(function() {
				turnState = "player";
			},
			gameSequence.length * lightUpDuration);

	}

}
//darkens the game pad after the lightUpPad function has done it's job
function darkenGamePad(color) {
	//console.log("darkenGamePad " + color);
	$("#" + color).removeClass(color + "TurnOn");
	$("#" + color).addClass(color + "TurnOff");
}

function playerPlays(playerResponse) {
	turnState = "player";
	if (gameSequence[playerResponsesCounter] !== playerResponse) {
		loseRound();
	} else {
		playerResponsesCounter++;
		if (gameSequence.length === playerResponsesCounter) {
			setTimeout(function() {
				computerPlays(true);
			}, 750); //keeps the computer from immediately doing it's sequence before the player has fully responded
			playerResponsesCounter = 0;
			levelCount++;
		}
	}
}

function lightUpPad(color) {
	/*console.log("lightUpPad " + color);*/
	$("#" + color).removeClass(color + "TurnOff");
	$("#" + color).addClass(color + "TurnOn");
	if (color === "yellowPad") {
		yellowPadSound = context.createBufferSource(); //creates a sound source
		yellowPadSound.buffer = bufferList[3]; //tells the source which sound to play
		yellowPadSound.connect(context.destination); //connects the sound to the speakers
		yellowPadSound.start(0); //plays the source innediately. (time)=equals the amount of time before the source is played
	} else if (color === "greenPad") {
		greenPadSound = context.createBufferSource();
		greenPadSound.buffer = bufferList[0];
		greenPadSound.connect(context.destination);
		greenPadSound.start(0);
	} else if (color === "redPad") {
		redPadSound = context.createBufferSource();
		redPadSound.buffer = bufferList[1];
		redPadSound.connect(context.destination);
		redPadSound.start(0);
	} else if (color === "bluePad") {
		bluePadSound = context.createBufferSource();
		bluePadSound.buffer = bufferList[2];
		bluePadSound.connect(context.destination);
		bluePadSound.start(0);
	}

}

//Using a bufferLoader class through web audio api to create, load audio buffers
var context;
var bufferLoader;
var bufferList;

function loadSounds() {
	window.AudioContext = window.AudioContext || window.webkitAudioContext;
	//AudioContext is used for managing and playing all sounds.
	context = new AudioContext();
	bufferLoader = new BufferLoader(
		context, ["http://res.cloudinary.com/angiemjohnson/video/upload/v1471888207/simonSound1_ajce3m.mp3",
			"http://res.cloudinary.com/angiemjohnson/video/upload/v1471888220/simonSound2_khpatu.mp3",
			"http://res.cloudinary.com/angiemjohnson/video/upload/v1471888236/simonSound3_gmfhys.mp3",
			"http://res.cloudinary.com/angiemjohnson/video/upload/v1471888253/simonSound4_wqvp1p.mp3",
			"http://res.cloudinary.com/angiemjohnson/video/upload/v1472237645/164089__hypocore__buzzer2_gkt1l5.wav",
			"http://res.cloudinary.com/angiemjohnson/video/upload/v1472241093/333404__jayfrosting__cheer-2_wq0edx.wav"
		],
		finishedLoading
	);
	bufferLoader.load();
}

function finishedLoading(bList) {
	bufferList = bList;
	init();
}

function loseRound() {
	if (strictMode === true) {
		loserNotification();
		$("#countWindow").html("--");
		$("#resetContainer").removeClass('slideUp');
		$("#gameStatement").text(losingMessage);
		$("#resetContainer").addClass('slideDown');
		$("#simonContainer").addClass("losingAnimation");
		init();
	} else {
		$("#simonContainer").addClass("losingAnimation");
		loserNotification();
		playerResponsesCounter = 0;
		setTimeout(function() {
			computerPlays(false);
		}, 3250);
	}
}

function loserNotification() {
	wrongAnswerBuzzer = context.createBufferSource();
	wrongAnswerBuzzer.buffer = bufferList[4];
	wrongAnswerBuzzer.connect(context.destination);
	wrongAnswerBuzzer.start(0);
}

function playerWins() {
	$("#resetContainer").removeClass('slideUp');
	$("#gameStatement").text(winningMessage);
	$("#resetContainer").addClass('slideDown');
	winnerCheer = context.createBufferSource();
	winnerCheer.buffer = bufferList[5];
	winnerCheer.connect(context.destination);
	winnerCheer.start(0);
	$(".circle").addClass("winningAnimation");
	$(".middleCircle").addClass("winningAnimation");
	init();
}

## scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://res.cloudinary.com/angiemjohnson/raw/upload/v1472778458/buffer-loader_bsqit1.js"></script>

## simon-game.markdown

      
    Raw
  

              simon-game.markdown
            
          
    Simon Game

This is a classic Simon game where the computer plays a sequence of colors and the player has to repeat the sequence  in order to move on to the next round.  The player wins the game when they can successfully complete 20 rounds.  There are two modes of play:  General: if the player misses a color in the sequence,  the computer will repeat the last sequence  until the player gets it right.  Strict:  the player has to be perfect in repeating the computer's color sequence.  If the player misses  any part of the sequence, the game is over.  The game was created to fulfill one of the requirement's
A Pen by  Angela Johnson on CodePen.
License.

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

body {
	background-color: gray;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.flexContainerColumns {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.flexContainerRows {
	display: flex;
	flex-direction: row;
}

.circle {
	height: 35vmin;
	width: 35vmin;
	border: solid black;
	box-shadow: 3px 3px 146px -8px rgba(0, 0, 0, 0.75);
	cursor: pointer;
	max-width: 360px;
	max-height: 360px;
	min-width: 150px;
	min-height: 150px;
}

.red {
	background: #B90000;
	border-top-right-radius: 100%;
	border-bottom-left-radius: 25%;
	border-width: 1.5em 1.5em .75em .75em;
}

.green {
	background: #008000;
	border-top-left-radius: 100%;
	border-bottom-right-radius: 25%;
	border-width: 1.5em .75em .75em 1.5em;
}

.blue {
	background: blue;
	border-bottom-left-radius: 100%;
	border-top-right-radius: 25%;
	border-width: .75em .75em 1.5em 1.5em;
}

.yellow {
	background: #F3B521;
	border-bottom-right-radius: 100%;
	border-top-left-radius: 25%;
	border-width: .75em 1.5em 1.5em .75em;
}

.redPadTurnOn {
	animation: redkeyframe 0.1s;
	animation-fill-mode: forwards;
}

.greenPadTurnOn {
	animation: greenkeyframe 0.1s;
	animation-fill-mode: forwards;
}

.bluePadTurnOn {
	animation: bluekeyframe .1s;
	animation-fill-mode: forwards;
}

.yellowPadTurnOn {
	animation: yellowkeyframe 0.1s;
	animation-fill-mode: forwards;
}

@keyframes redkeyframe {
	0% {
		background: #B90000;
		border-width: 1.5em 1.5em .75em .75em;
	}
	100% {
		background: #FF5050;
		border-width: 1em 1em .5em .5em;
	}
}

@keyframes greenkeyframe {
	0% {
		background: #008000;
		border-width: 1.5em .75em .75em 1.5em;
	}
	100% {
		background: #00FF00;
		border-width: 1em 0.5em 0.5em 1em;
	}
}

@keyframes bluekeyframe {
	0% {
		background: blue;
		border-width: .75em .75em 1.5em 1.5em;
	}
	100% {
		background: #1E90FF;
		border-width: 0.5em 0.5em 1em 1em;
	}
}

@keyframes yellowkeyframe {
	0% {
		background: #F3B521;
		border-width: .75em 1.5em 1.5em .75em;
	}
	100% {
		background: #FFFF00;
		border-width: 0.5em 1em 1em .5em;
	}
}

.redPadTurnOff {
	animation: redturnoffkeyframe 0.005s;
	animation-fill-mode: forwards;
}

.greenPadTurnOff {
	animation: greenturnoffkeyframe 0.005s;
	animation-fill-mode: forwards;
}

.bluePadTurnOff {
	animation: blueturnoffkeyframe 0.005s;
	animation-fill-mode: forwards;
}

.yellowPadTurnOff {
	animation: yellowturnoffkeyframe 0.005s;
	animation-fill-mode: forwards;
}

@keyframes redturnoffkeyframe {
	0% {
		background: #FF5050;
		border-width: 1em 1em 0.5em 0.5em;
	}
	100% {
		background: #B90000;
		border-width: 1.5em 1.5em .75em .75em;
	}
}

@keyframes greenturnoffkeyframe {
	0% {
		background: #00FF00;
		border-width: 1em 0.5em 0.5em 1em;
	}
	100% {
		background: #008000;
		border-width: 1.5em .75em .75em 1.5em;
	}
}

@keyframes blueturnoffkeyframe {
	0% {
		background: #1E90FF;
		border-width: 0.5em 0.5em 1em 1em;
	}
	100% {
		background: blue;
		border-width: .75em .75em 1.5em 1.5em;
	}
}

@keyframes yellowturnoffkeyframe {
	0% {
		background: #FFFF00;
		border-width: 0.5em 1em 1em 0.5em;
	}
	100% {
		background: #F3B521;
		border-width: .75em 1.5em 1.5em .75em;
	}
}

#centeringFlexBox {
	display: flex;
	justify-content: center;
	align-items: center;
}

.middleCircle {
	display: flex;
	align-content: center;
	justify-content: center;
	position: absolute;
	z-index: 5;
	background: #a9aaab;
	border-radius: 50%;
	height: 40vmin;
	width: 40vmin;
	border: solid .5vh black;
	max-width: 215px;
	max-height: 215px;
	min-height: 170px;
	min-width: 170px;
}

#simonContainer {
	position: relative;
	max-width: 580px;
}

#gameTitle {
	text-align: center;
	margin-bottom: 60px;
	padding-bottom: 20px;
	color: black;
	font-size: 80px;
	font-family: 'Orbitron', sans-serif;
	font-weight: 400px;
	animation-name: rollIn;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@keyframes rollIn {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
		transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

#gameOptions {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#count {
	font-weight: bold;
	font-size: 2em;
}

#countWindow {
	background: black;
	max-width: 50px;
	max-height: 50px;
	width: 33%;
	height: 33%;
	border: solid 3px white;
	color: darkorange;
	text-align: center;
	font-size: 20px;
}

@media only screen and (max-width: 500px) {
	#count {
		font-size: 1em;
	}
}

.centeredRow {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: .5em 0 0 0;
}

.gameControlButton {
	padding: 0 .75em 0 .75em;
}

.centeredRow {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	margin: .25em 0 0 0;
}

#startButton {
	background: red;
	background-image: -webkit-linear-gradient(top, red, darkred);
	background-image: -moz-linear-gradient(top, red, darkred);
	background-image: -ms-linear-gradient(top, red, darkred);
	background-image: -o-linear-gradient(top, red, darkred);
	background-image: linear-gradient(to bottom, red, darkred);
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 50px;
	font-family: Arial;
	color: #ffffff;
	font-size: 12px;
	text-decoration: none;
	width: 27px;
	height: 27px;
}

#strictButton {
	background: yellow;
	background-image: -webkit-linear-gradient(top, yellow, greenyellow);
	background-image: -moz-linear-gradient(top, yellow, greenyellow);
	background-image: -ms-linear-gradient(top, yellow, greenyellow);
	background-image: -o-linear-gradient(top, yellow, greenyellow);
	background-image: linear-gradient(to bottom, yellow, greenyellow);
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 50px;
	font-family: Arial;
	color: #ffffff;
	font-size: 12px;
	text-decoration: none;
	width: 27px;
	height: 27px;
}

#startButton:hover {
	background: darkred;
	background-image: -webkit-linear-gradient(top, red, darkred);
	background-image: -moz-linear-gradient(top, red, darkred);
	background-image: -ms-linear-gradient(top, red, darkred);
	background-image: -o-linear-gradient(top, red, darkred);
	background-image: linear-gradient(to bottom, red, darkred);
	text-decoration: none;
}

#strictButton:hover {
	background: red;
	background-image: -webkit-linear-gradient(top, yellow, greenyellow);
	background-image: -moz-linear-gradient(top, yellow, greenyellow);
	background-image: -ms-linear-gradient(top, yellow, greenyellow);
	background-image: -o-linear-gradient(top, yellow, greenyellow);
	background-image: linear-gradient(to bottom, yellow, greenyellow);
	text-decoration: none;
}

.led-box {
	height: 20px;
}

#led {
	margin: 0 auto;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.4) 0 -1px 7px 1px, inset #D3D3D3 0 -1px 9px, rgba(169, 169, 169, 0.5) 0 2px 12px;
}

.led-clear {
	background-color: #C0C0C0;
}

.led-green {
	background-color: lawngreen;
}

.led-red {
	margin: 0 auto;
	width: 12px;
	height: 12px;
	background-color: #600;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
	-webkit-animation: blinkRed 0.5s infinite;
	-moz-animation: blinkRed 0.5s infinite;
	-ms-animation: blinkRed 0.5s infinite;
	-o-animation: blinkRed 0.5s infinite;
	animation: blinkRed 0.5s infinite;
}

@-webkit-keyframes blinkRed {
	from {
		background-color: #F00;
	}
	50% {
		background-color: #A00;
		box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;
	}
	to {
		background-color: #F00;
	}
}

@-moz-keyframes blinkRed {
	from {
		background-color: #F00;
	}
	50% {
		background-color: #A00;
		box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;
	}
	to {
		background-color: #F00;
	}
}

@-ms-keyframes blinkRed {
	from {
		background-color: #F00;
	}
	50% {
		background-color: #A00;
		box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;
	}
	to {
		background-color: #F00;
	}
}

@-o-keyframes blinkRed {
	from {
		background-color: #F00;
	}
	50% {
		background-color: #A00;
		box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;
	}
	to {
		background-color: #F00;
	}
}

@keyframes blinkRed {
	from {
		background-color: #F00;
	}
	50% {
		background-color: #A00;
		box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;
	}
	to {
		background-color: #F00;
	}
}

#powerSwitch {}

#on-off {
	float: left;
	margin: 10 5px;
	position: relative;
	font-size: .75em;
	margin: 25px 30px;
	line-height: 20px;
}

#on-off-mark {
	float: left;
	width: 50px;
	height: 20px;
	background-color: #222222;
	margin: 0 6px;
	border-radius: 3px;
}

#on,
#off {
	float: left;
}

#mark-toggle {
	display: block;
	position: relative;
	width: 20px;
	height: 16px;
	margin: 2px;
	background-color: #3193DE;
}

footer {
	padding-top: 100px;
	font-size: 20px;
	font-weight: 400px;
	text-align: center;
	color: black;
	font-family: 'Playfair Display', serif;
}

.social {
	margin: 0;
	padding: 0;
}

.social ul {
	margin: 0;
	padding: 5px;
}

.social ul li {
	margin: 5px;
	list-style: none outside none;
	display: inline-block;
}

.social i {
	width: 40px;
	height: 40px;
	color: #FFF;
	background-color: #909AA0;
	font-size: 22px;
	text-align: center;
	padding-top: 12px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-webkit-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
}

.social i:hover {
	color: #FFF;
	text-decoration: none;
	transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-webkit-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
}

.social .fa-facebook:hover {
	/* round facebook icon*/
	background: #4060A5;
}

.social .fa-twitter:hover {
	/* round twitter icon*/
	background: #00ABE3;
}

.social .fa-linkedin:hover {
	/* round linkedin icon*/
	background: #0094BC;
}

.social .fa-github:hover {
	/* round github icon*/
	background: #343434;
}

.social .fa-fire:hover {
	/* round github icon*/
	background: #008000;
}

.popupContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin: 0;
	position: fixed;
	overflow: hidden;
	pointer-events: none;
	z-index: 10;
	width: 400px;
	height: 100%;
	top: -100%;
}

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

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

h3 {
	color: black;
	font-weight: bold;
	font-size: 25px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}

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

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

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

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

.winningAnimation {
	animation: winningAnimation 1s linear;
	animation-iteration-count: 2;
}

@keyframes winningAnimation {
	100% {
		transform: rotate(360deg);
	}
}

.losingAnimation {
	animation: losingAnimation 1.5s linear;
	animation-iteration-count: 2;
}

@keyframes losingAnimation {
	0% {
		transform: rotateY(0deg)
	}
	25% {
		transform: rotateY(60deg)
	}
	50% {
		transform: rotateY(0deg)
	}
	75% {
		transform: rotateY(-60deg)
	}
	100% {
		transform: rotateY(0deg)
	}
}

## styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch-px.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" />
	<html>

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Simon Game</title>
	</head>
	<body>
	<div id="resetContainer" class="popupContainer">
	<div id="gameStatementBox" class="loserPopUp">
	<h3 id="gameStatement"></h3>
	</div>
	</div>
	<div id="gameTitle">SIMON</div>
	<div id="centeringFlexBox">
	<div class="middleCircle">
	<div id="gameOptions">
	<div id="count" class="centeredRow">Level</div>
	<div class="centeredRow">
	<div id="countWindow">&nbsp</div>
	</div>
	<div id="gameControlButtons" class="centeredRow">
	<div id="start" class='gameControlButton'>
	<div id="startButtonLabel">Start</div>
	<button id="startButton" class="btn"></button>
	</div>
	<div class="led-box" class='gameControlButton'>
	<div id="led" class="led-clear"></div>
	</div>
	<div id="strict" class='gameControlButton'>
	<div id="strictButtonLabel">Strict</div>
	<button id="strictButton" class="btn"></button>
	</div>
	</div>
	<div id="powerSwitch" class="centeredRow">
	<div id="off">
	<span>Off</span>
	</div>
	<div id="on-off-mark"><span id="mark-toggle"></span></div>
	<div id="on">
	<span>On</span>
	</div>
	</div>
	</div>
	</div>
	<div id="simonContainer">
	<div class="flexContainerColumns">
	<div class="flexContainerRows">
	<div id="greenPad" class="green circle greenPadTurnOff"></div>
	<div id="redPad" class="red circle redPadTurnOff"></div>
	</div>
	<div class="flexContainerRows">
	<div id="bluePad" class="blue circle bluePadTurnOff"></div>
	<div id="yellowPad" class="yellow circle yellowPadTurnOff"></div>
	</div>
	</div>

	</div>
	</div>
	<footer>
	<div class="social text-center center-block">
	<ul>
	<li><a href="https://www.facebook.com/reggirl38"><i class="fa fa-lg fa-facebook"></i></a></li>
	<li><a href="http://twitter.com/reggirl32"><i class="fa fa-lg fa-twitter"></i></a></li>
	<li><a href="https://github.com/amjohnson38"><i class="fa fa-lg fa-github"></i></a></li>
	<li><a href="https://www.linkedin.com/in/angelamjohnson95"><i class="fa fa-lg fa-linkedin"></i></a></li>
	<li>
	<a href="https://www.freecodecamp.com/amjohnson38" target="_blank" title="See my Free Code Camp profile!">
	<i class="fa fa-fire fa-lg"></i></li>
	</a>
	</ul>
	</div>
	<p>Created and Coded by Angela Johnson 2016</p>
	</footer>
	</body>

	</html>
	var gameSequence = [];
	var playerResponse;
	var playerResponsesCounter = 0;
	var strictMode = false;
	var levelCount = 0;
	var roundsToWin = 20;
	var powerState = "off";
	var gameState = "notPlaying";
	var turnState = "computer";
	var colors = ["greenPad", "redPad", "bluePad", "yellowPad"];
	var lightUpDuration;
	var lightUpStep = 50;
	var lightGap;
	var lightGapStep = 2;
	var yellowPadSound;
	var greenPadSound;
	var redPadSound;
	var bluePadSound;
	var setTimeOutLightUp;
	var setTimeOutDarken;
	var timeOutArray = [];
	var wrongAnswerBuzzer;
	var winnerCheer;
	var losingMessage = "You Lose! Press Start To Play Again.";
	var winningMessage = "You Won! Press Start To Play Again";
	var boolFirstPlay = true;

	$(function() {
	loadSounds(); //
	W = window.innerWidth;
	H = window.innerHeight;
	$("#powerSwitch").on("click", function() {
	if (powerState === "off") {
	$("#mark-toggle").animate({
	left: "26px"
	}, 50);
	$("#countWindow").html("--");
	$("#led").addClass("led-green");
	$("#led").removeClass("led-clear");
	powerState = "on";

	} else if (powerState === "on") {
	$("#mark-toggle").animate({
	left: "0px"
	}, 50);
	powerState = "off";
	$("#countWindow").html("&nbsp");
	$("#led").removeClass("led-green");
	$("#led").removeClass("led-red");
	$("#led").addClass("led-clear");

	if ($("#resetContainer").hasClass('slideDown')) {
	$("#resetContainer").removeClass('slideDown');
	$("#resetContainer").addClass('slideUp');
	}

	init();
	//clears the setTimeout method that were set for the lightUpPad function
	for (var i = 0; i < timeOutArray.length; i++) {
	clearTimeout(timeOutArray[i]);
	}
	//clears the setTimeout method for the darkenGamePad function
	for (var i = 0; i < colors.length; i++) {
	clearTimeout(darkenGamePad(colors[i]));
	}

	}

	});

	$(".circle").mousedown(function(event) {
	if ((powerState === "on") &&
	(turnState === "player")) {
	lightUpPad(event.currentTarget.id);
	}

	});

	$(".circle").mouseup(function(event) {
	if ((powerState === "on") &&
	(turnState === "player")) {
	playerPlays(event.currentTarget.id);
	darkenGamePad(event.currentTarget.id);
	}
	});

	$("#startButton").on("click", function() {
	if (powerState === "on") {
	$(".circle").removeClass("winningAnimation");
	$(".middleCircle").removeClass("winningAnimation");
	$("#simonContainer").removeClass("losingAnimation");
	if ($("#resetContainer").hasClass('slideDown')) {
	$("#resetContainer").removeClass('slideDown');
	$("#resetContainer").addClass('slideUp');
	}
	gameState = "playing";
	computerPlays(true);
	}

	});

	$("#strictButton").on("click", function() {

	if ((powerState === "on") &&
	((turnState !== "computer") && (turnState !== "player"))) {
	strictMode = !strictMode;
	if (strictMode === true) {
	$("#led").addClass("led-red");
	} else {
	$("#led").removeClass("led-red");
	$("#led").addClass("led-clear");
	}
	}
	});
	});

	//chooses a random color out of the 4 colors
	function chooseRandomColor() {
	var randomNumber = Math.floor(Math.random() * 4);
	/console.log(randomNumber);/
	var randomColor = colors[randomNumber];
	/console.log(randomColor);/
	return randomColor;
	}
	//initializes the game upon starting
	function init() {
	levelCount = 1;
	console.log(levelCount);
	/*if (powerState === "on") {
	$("#countWindow").html(levelCount);
	}*/
	gameState = "notPlaying";
	turnState = undefined; // allows the player to turn on the strict button prior to the game starting.
	darkenGamePad();
	gameSequence = [];
	playerResponsesCounter = 0;
	lightUpDuration = 1400;
	lightGap = 75;

	}

	function computerPlays(addNew) {
	if (levelCount > roundsToWin) {
	gameState = "playerWon";
	playerWins();
	return;
	}
	if (gameState === "playing") {
	/console.log(" starting Round ");/
	turnState = "computer";
	$("#countWindow").html(levelCount);
	//adds a new color to the sequence
	if (addNew === true) {
	color = chooseRandomColor(); //the random color that has been choosen
	gameSequence.push(color); //the color is pushed into the game sequence array
	console.log(gameSequence);
	}
	if (addNew === false) {
	$("#simonContainer").removeClass("losingAnimation");
	}

	lightUpDuration = lightUpDuration - lightUpStep; //the length of time the pad stays illuminated
	lightGap = lightGap - lightGapStep; //the time between a light turning off and the next light turning on
	timeOutArray = []; //emptying of the timeOutArray
	//the gameSequence array is looped through and the current color to be animated is selected.
	for (var i = 0; i < gameSequence.length; i++) {
	var currentColor = gameSequence[i];
	var setTimeOutLightUp = setTimeout(lightUpPad.bind(null, gameSequence[i]), lightUpDuration * i);
	var setTimeOutDarken = setTimeout(darkenGamePad.bind(null, gameSequence[i]),
	lightUpDuration * (i + 1) - lightGap);
	timeOutArray.push(setTimeOutLightUp, setTimeOutDarken);

	}
	setTimeout(function() {
	turnState = "player";
	},
	gameSequence.length * lightUpDuration);

	}

	}
	//darkens the game pad after the lightUpPad function has done it's job
	function darkenGamePad(color) {
	//console.log("darkenGamePad " + color);
	$("#" + color).removeClass(color + "TurnOn");
	$("#" + color).addClass(color + "TurnOff");
	}

	function playerPlays(playerResponse) {
	turnState = "player";
	if (gameSequence[playerResponsesCounter] !== playerResponse) {
	loseRound();
	} else {
	playerResponsesCounter++;
	if (gameSequence.length === playerResponsesCounter) {
	setTimeout(function() {
	computerPlays(true);
	}, 750); //keeps the computer from immediately doing it's sequence before the player has fully responded
	playerResponsesCounter = 0;
	levelCount++;
	}
	}
	}

	function lightUpPad(color) {
	/console.log("lightUpPad " + color);/
	$("#" + color).removeClass(color + "TurnOff");
	$("#" + color).addClass(color + "TurnOn");
	if (color === "yellowPad") {
	yellowPadSound = context.createBufferSource(); //creates a sound source
	yellowPadSound.buffer = bufferList[3]; //tells the source which sound to play
	yellowPadSound.connect(context.destination); //connects the sound to the speakers
	yellowPadSound.start(0); //plays the source innediately. (time)=equals the amount of time before the source is played
	} else if (color === "greenPad") {
	greenPadSound = context.createBufferSource();
	greenPadSound.buffer = bufferList[0];
	greenPadSound.connect(context.destination);
	greenPadSound.start(0);
	} else if (color === "redPad") {
	redPadSound = context.createBufferSource();
	redPadSound.buffer = bufferList[1];
	redPadSound.connect(context.destination);
	redPadSound.start(0);
	} else if (color === "bluePad") {
	bluePadSound = context.createBufferSource();
	bluePadSound.buffer = bufferList[2];
	bluePadSound.connect(context.destination);
	bluePadSound.start(0);
	}

	}

	//Using a bufferLoader class through web audio api to create, load audio buffers
	var context;
	var bufferLoader;
	var bufferList;

	function loadSounds() {
	window.AudioContext = window.AudioContext \|\| window.webkitAudioContext;
	//AudioContext is used for managing and playing all sounds.
	context = new AudioContext();
	bufferLoader = new BufferLoader(
	context, ["http://res.cloudinary.com/angiemjohnson/video/upload/v1471888207/simonSound1_ajce3m.mp3",
	"http://res.cloudinary.com/angiemjohnson/video/upload/v1471888220/simonSound2_khpatu.mp3",
	"http://res.cloudinary.com/angiemjohnson/video/upload/v1471888236/simonSound3_gmfhys.mp3",
	"http://res.cloudinary.com/angiemjohnson/video/upload/v1471888253/simonSound4_wqvp1p.mp3",
	"http://res.cloudinary.com/angiemjohnson/video/upload/v1472237645/164089__hypocore__buzzer2_gkt1l5.wav",
	"http://res.cloudinary.com/angiemjohnson/video/upload/v1472241093/333404__jayfrosting__cheer-2_wq0edx.wav"
	],
	finishedLoading
	);
	bufferLoader.load();
	}

	function finishedLoading(bList) {
	bufferList = bList;
	init();
	}

	function loseRound() {
	if (strictMode === true) {
	loserNotification();
	$("#countWindow").html("--");
	$("#resetContainer").removeClass('slideUp');
	$("#gameStatement").text(losingMessage);
	$("#resetContainer").addClass('slideDown');
	$("#simonContainer").addClass("losingAnimation");
	init();
	} else {
	$("#simonContainer").addClass("losingAnimation");
	loserNotification();
	playerResponsesCounter = 0;
	setTimeout(function() {
	computerPlays(false);
	}, 3250);
	}
	}

	function loserNotification() {
	wrongAnswerBuzzer = context.createBufferSource();
	wrongAnswerBuzzer.buffer = bufferList[4];
	wrongAnswerBuzzer.connect(context.destination);
	wrongAnswerBuzzer.start(0);
	}

	function playerWins() {
	$("#resetContainer").removeClass('slideUp');
	$("#gameStatement").text(winningMessage);
	$("#resetContainer").addClass('slideDown');
	winnerCheer = context.createBufferSource();
	winnerCheer.buffer = bufferList[5];
	winnerCheer.connect(context.destination);
	winnerCheer.start(0);
	$(".circle").addClass("winningAnimation");
	$(".middleCircle").addClass("winningAnimation");
	init();
	}
	<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
	<script src="http://res.cloudinary.com/angiemjohnson/raw/upload/v1472778458/buffer-loader_bsqit1.js"></script>
	* {
	margin: 0;
	padding: 0;
	}

	body {
	background-color: gray;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	}

	.flexContainerColumns {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	}

	.flexContainerRows {
	display: flex;
	flex-direction: row;
	}

	.circle {
	height: 35vmin;
	width: 35vmin;
	border: solid black;
	box-shadow: 3px 3px 146px -8px rgba(0, 0, 0, 0.75);
	cursor: pointer;
	max-width: 360px;
	max-height: 360px;
	min-width: 150px;
	min-height: 150px;
	}

	.red {
	background: #B90000;
	border-top-right-radius: 100%;
	border-bottom-left-radius: 25%;
	border-width: 1.5em 1.5em .75em .75em;
	}

	.green {
	background: #008000;
	border-top-left-radius: 100%;
	border-bottom-right-radius: 25%;
	border-width: 1.5em .75em .75em 1.5em;
	}

	.blue {
	background: blue;
	border-bottom-left-radius: 100%;
	border-top-right-radius: 25%;
	border-width: .75em .75em 1.5em 1.5em;
	}

	.yellow {
	background: #F3B521;
	border-bottom-right-radius: 100%;
	border-top-left-radius: 25%;
	border-width: .75em 1.5em 1.5em .75em;
	}

	.redPadTurnOn {
	animation: redkeyframe 0.1s;
	animation-fill-mode: forwards;
	}

	.greenPadTurnOn {
	animation: greenkeyframe 0.1s;
	animation-fill-mode: forwards;
	}

	.bluePadTurnOn {
	animation: bluekeyframe .1s;
	animation-fill-mode: forwards;
	}

	.yellowPadTurnOn {
	animation: yellowkeyframe 0.1s;
	animation-fill-mode: forwards;
	}

	@keyframes redkeyframe {
	0% {
	background: #B90000;
	border-width: 1.5em 1.5em .75em .75em;
	}
	100% {
	background: #FF5050;
	border-width: 1em 1em .5em .5em;
	}
	}

	@keyframes greenkeyframe {
	0% {
	background: #008000;
	border-width: 1.5em .75em .75em 1.5em;
	}
	100% {
	background: #00FF00;
	border-width: 1em 0.5em 0.5em 1em;
	}
	}

	@keyframes bluekeyframe {
	0% {
	background: blue;
	border-width: .75em .75em 1.5em 1.5em;
	}
	100% {
	background: #1E90FF;
	border-width: 0.5em 0.5em 1em 1em;
	}
	}

	@keyframes yellowkeyframe {
	0% {
	background: #F3B521;
	border-width: .75em 1.5em 1.5em .75em;
	}
	100% {
	background: #FFFF00;
	border-width: 0.5em 1em 1em .5em;
	}
	}

	.redPadTurnOff {
	animation: redturnoffkeyframe 0.005s;
	animation-fill-mode: forwards;
	}

	.greenPadTurnOff {
	animation: greenturnoffkeyframe 0.005s;
	animation-fill-mode: forwards;
	}

	.bluePadTurnOff {
	animation: blueturnoffkeyframe 0.005s;
	animation-fill-mode: forwards;
	}

	.yellowPadTurnOff {
	animation: yellowturnoffkeyframe 0.005s;
	animation-fill-mode: forwards;
	}

	@keyframes redturnoffkeyframe {
	0% {
	background: #FF5050;
	border-width: 1em 1em 0.5em 0.5em;
	}
	100% {
	background: #B90000;
	border-width: 1.5em 1.5em .75em .75em;
	}
	}

	@keyframes greenturnoffkeyframe {
	0% {
	background: #00FF00;
	border-width: 1em 0.5em 0.5em 1em;
	}
	100% {
	background: #008000;
	border-width: 1.5em .75em .75em 1.5em;
	}
	}

	@keyframes blueturnoffkeyframe {
	0% {
	background: #1E90FF;
	border-width: 0.5em 0.5em 1em 1em;
	}
	100% {
	background: blue;
	border-width: .75em .75em 1.5em 1.5em;
	}
	}

	@keyframes yellowturnoffkeyframe {
	0% {
	background: #FFFF00;
	border-width: 0.5em 1em 1em 0.5em;
	}
	100% {
	background: #F3B521;
	border-width: .75em 1.5em 1.5em .75em;
	}
	}

	#centeringFlexBox {
	display: flex;
	justify-content: center;
	align-items: center;
	}

	.middleCircle {
	display: flex;
	align-content: center;
	justify-content: center;
	position: absolute;
	z-index: 5;
	background: #a9aaab;
	border-radius: 50%;
	height: 40vmin;
	width: 40vmin;
	border: solid .5vh black;
	max-width: 215px;
	max-height: 215px;
	min-height: 170px;
	min-width: 170px;
	}

	#simonContainer {
	position: relative;
	max-width: 580px;
	}

	#gameTitle {
	text-align: center;
	margin-bottom: 60px;
	padding-bottom: 20px;
	color: black;
	font-size: 80px;
	font-family: 'Orbitron', sans-serif;
	font-weight: 400px;
	animation-name: rollIn;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	}

	@keyframes rollIn {
	from {
	opacity: 0;
	-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
	transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
	}
	to {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
	}
	}

	#gameOptions {
	display: flex;
	flex-direction: column;
	justify-content: center;
	}

	#count {
	font-weight: bold;
	font-size: 2em;
	}

	#countWindow {
	background: black;
	max-width: 50px;
	max-height: 50px;
	width: 33%;
	height: 33%;
	border: solid 3px white;
	color: darkorange;
	text-align: center;
	font-size: 20px;
	}

	@media only screen and (max-width: 500px) {
	#count {
	font-size: 1em;
	}
	}

	.centeredRow {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: .5em 0 0 0;
	}

	.gameControlButton {
	padding: 0 .75em 0 .75em;
	}

	.centeredRow {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	margin: .25em 0 0 0;
	}

	#startButton {
	background: red;
	background-image: -webkit-linear-gradient(top, red, darkred);
	background-image: -moz-linear-gradient(top, red, darkred);
	background-image: -ms-linear-gradient(top, red, darkred);
	background-image: -o-linear-gradient(top, red, darkred);
	background-image: linear-gradient(to bottom, red, darkred);
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 50px;
	font-family: Arial;
	color: #ffffff;
	font-size: 12px;
	text-decoration: none;
	width: 27px;
	height: 27px;
	}

	#strictButton {
	background: yellow;
	background-image: -webkit-linear-gradient(top, yellow, greenyellow);
	background-image: -moz-linear-gradient(top, yellow, greenyellow);
	background-image: -ms-linear-gradient(top, yellow, greenyellow);
	background-image: -o-linear-gradient(top, yellow, greenyellow);
	background-image: linear-gradient(to bottom, yellow, greenyellow);
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 50px;
	font-family: Arial;
	color: #ffffff;
	font-size: 12px;
	text-decoration: none;
	width: 27px;
	height: 27px;
	}

	#startButton:hover {
	background: darkred;
	background-image: -webkit-linear-gradient(top, red, darkred);
	background-image: -moz-linear-gradient(top, red, darkred);
	background-image: -ms-linear-gradient(top, red, darkred);
	background-image: -o-linear-gradient(top, red, darkred);
	background-image: linear-gradient(to bottom, red, darkred);
	text-decoration: none;
	}

	#strictButton:hover {
	background: red;
	background-image: -webkit-linear-gradient(top, yellow, greenyellow);
	background-image: -moz-linear-gradient(top, yellow, greenyellow);
	background-image: -ms-linear-gradient(top, yellow, greenyellow);
	background-image: -o-linear-gradient(top, yellow, greenyellow);
	background-image: linear-gradient(to bottom, yellow, greenyellow);
	text-decoration: none;
	}

	.led-box {
	height: 20px;
	}

	#led {
	margin: 0 auto;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.4) 0 -1px 7px 1px, inset #D3D3D3 0 -1px 9px, rgba(169, 169, 169, 0.5) 0 2px 12px;
	}

	.led-clear {
	background-color: #C0C0C0;
	}

	.led-green {
	background-color: lawngreen;
	}

	.led-red {
	margin: 0 auto;
	width: 12px;
	height: 12px;
	background-color: #600;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
	-webkit-animation: blinkRed 0.5s infinite;
	-moz-animation: blinkRed 0.5s infinite;
	-ms-animation: blinkRed 0.5s infinite;
	-o-animation: blinkRed 0.5s infinite;
	animation: blinkRed 0.5s infinite;
	}

	@-webkit-keyframes blinkRed {
	from {
	background-color: #F00;
	}
	50% {
	background-color: #A00;
	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;
	}
	to {
	background-color: #F00;
	}
	}

	@-moz-keyframes blinkRed {
	from {
	background-color: #F00;
	}
	50% {
	background-color: #A00;
	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;
	}
	to {
	background-color: #F00;
	}
	}

	@-ms-keyframes blinkRed {
	from {
	background-color: #F00;
	}
	50% {
	background-color: #A00;
	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;
	}
	to {
	background-color: #F00;
	}
	}

	@-o-keyframes blinkRed {
	from {
	background-color: #F00;
	}
	50% {
	background-color: #A00;
	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;
	}
	to {
	background-color: #F00;
	}
	}

	@keyframes blinkRed {
	from {
	background-color: #F00;
	}
	50% {
	background-color: #A00;
	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;
	}
	to {
	background-color: #F00;
	}
	}

	#powerSwitch {}

	#on-off {
	float: left;
	margin: 10 5px;
	position: relative;
	font-size: .75em;
	margin: 25px 30px;
	line-height: 20px;
	}

	#on-off-mark {
	float: left;
	width: 50px;
	height: 20px;
	background-color: #222222;
	margin: 0 6px;
	border-radius: 3px;
	}

	#on,
	#off {
	float: left;
	}

	#mark-toggle {
	display: block;
	position: relative;
	width: 20px;
	height: 16px;
	margin: 2px;
	background-color: #3193DE;
	}

	footer {
	padding-top: 100px;
	font-size: 20px;
	font-weight: 400px;
	text-align: center;
	color: black;
	font-family: 'Playfair Display', serif;
	}

	.social {
	margin: 0;
	padding: 0;
	}

	.social ul {
	margin: 0;
	padding: 5px;
	}

	.social ul li {
	margin: 5px;
	list-style: none outside none;
	display: inline-block;
	}

	.social i {
	width: 40px;
	height: 40px;
	color: #FFF;
	background-color: #909AA0;
	font-size: 22px;
	text-align: center;
	padding-top: 12px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-webkit-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	}

	.social i:hover {
	color: #FFF;
	text-decoration: none;
	transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-webkit-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	}

	.social .fa-facebook:hover {
	/* round facebook icon*/
	background: #4060A5;
	}

	.social .fa-twitter:hover {
	/* round twitter icon*/
	background: #00ABE3;
	}

	.social .fa-linkedin:hover {
	/* round linkedin icon*/
	background: #0094BC;
	}

	.social .fa-github:hover {
	/* round github icon*/
	background: #343434;
	}

	.social .fa-fire:hover {
	/* round github icon*/
	background: #008000;
	}

	.popupContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin: 0;
	position: fixed;
	overflow: hidden;
	pointer-events: none;
	z-index: 10;
	width: 400px;
	height: 100%;
	top: -100%;
	}

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

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

	h3 {
	color: black;
	font-weight: bold;
	font-size: 25px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	}

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

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

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

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

	.winningAnimation {
	animation: winningAnimation 1s linear;
	animation-iteration-count: 2;
	}

	@keyframes winningAnimation {
	100% {
	transform: rotate(360deg);
	}
	}

	.losingAnimation {
	animation: losingAnimation 1.5s linear;
	animation-iteration-count: 2;
	}

	@keyframes losingAnimation {
	0% {
	transform: rotateY(0deg)
	}
	25% {
	transform: rotateY(60deg)
	}
	50% {
	transform: rotateY(0deg)
	}
	75% {
	transform: rotateY(-60deg)
	}
	100% {
	transform: rotateY(0deg)
	}
	}
	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css" rel="stylesheet" />
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet" />
	<link href="https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch-px.css" rel="stylesheet" />
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" />