@charset "UTF-8";
/* CSS Document */

*{ /* affects all elements of the whole page */
	/*get rid of default padding and various other elements*/
	padding: 0;
	margin: 0;
	box-sizing: border-box;

}

html{ /* does the whole page */
	
}

body 
{	
	background-color: black;
	display: flex;
	justify-content: space-around;
	font-family: 'Zen Dots', cursive;
}



div.main_content
{
	align-content: center;
}

h1.page_header
{
	font-size: 100px;
	text-align: center;
	padding-bottom: 30px;
	padding-top: 35px;
	color: #FFFF00;
}

h2#game-message
{
	font-size: 60px;
	text-align: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	color: #FF6600;
}

div[id^="row-"] {clear: both;}
div[id^="row-"] div
{
	border: 5px solid #00FF66;
	height: 200px;
	width: 200px;
	float: left;
	text-align: center;
	color: #00FFFF;
	font-size: 175px;
}

div#row-1 div {border-top: none;}
div#row-3 div {border-bottom: none;}
div[id^="row-"] div:first-child {border-left: none;}
div[id^="row-"] div:last-child {border-right: none;}

div#game-board 
{
	overflow: hidden;
	margin: 20px auto;
	width: 605px;
}

table
{
	position: absolute;
	right: -35%;
	bottom: 75%;
	text-align: center;
	padding: 3px;
	cellpadding: 5px;
	border: 3px solid white;
	color: lightblue;
	font-size: 30px;
	background-color: midnightblue;
}

th
{
	text-decoration: underline;
	
}

div.board_wrapper
{
	position: relative;
}


button.restartButton
{
	position: absolute;
	left: 100%;
	bottom: 50%;
	display:none;
	font-size: 40px;
	width: 240px;
	height: 110px;
	background-color: #FF00FF;
	font-family: 'Zen Dots', cursive;
}

img.pic02
{
	position: absolute;
	right: 100%;
	bottom: 50%;
	transform: rotate(-40deg);
	
}