/*Create friendly interface for game board*/
/*Create modal to pop-up and display how to play*/
/*Update all buttons with css to show better.*/
/*Create play area with four colored buttons*/
/*Style start and reset button*/

/*Select all elements on the page and apply this font family.*/
* {
	font-family: 'Baloo Bhaina', cursive;
}

/*Back ground color for body of the page in browser.*/
body {
	background-color: white;
}

/*Paragraph element font size for round display.*/
p {
	font-size: 20px;
	display: inline;
	margin: 0 20px 0 20px;
}

/*Dimensions for 'how to', 'start' & 'reset' buttons.*/
button {
	height: 50px;
	width: 100px;
	font-size: 14px;
	cursor: pointer;
	border-radius: 10%;
	background-color: gold;
	outline: none;
}

button:hover {
	color: #ffffff;
}

/*Top heading information, 'how to' button.*/
.information {
	text-align: center;
}

/*Displays current round and highest round finished.*/
.status {
	margin: auto;
	text-align: center;
}

/*The two function buttons below the play area. Labeled with ids below*/
.functions {
	text-align: center;
	margin: 10px 20px;
}

/*Start button*/
#start {
	margin-right: 50px;
}

/*Reset button*/
#reset {
	margin-left: 50px;
}

/*Play area holding the Simon buttons.*/
.container {
	display: grid;
	grid-template-columns: 200px 200px;
	grid-gap: 0 10px;
	border-radius: 25%;
	height: 400px;
	width: 500px;
	justify-content: center;
	/*background-color: black;*/
	margin: auto;
	/*box-shadow: 10px 15px #888888;*/
}

/*Class for all Simon buttons, the subsequent color ids are for the respective colored button.*/
.simon {
	height: 100px; 
	width: 100px;
	margin: auto;
	cursor: pointer;
	border-radius: 15px;
	padding: 70px;
}

/*Green button*/
#green {
	background-color: #005f00;
	border-radius: 30%;
	padding: 30px;
	border: 5px solid #4cbb17;
}

/*Red button*/
#red {
	background-color: #c00000;
	border-radius: 30%;
	padding: 30px;
	border: 5px solid #ff0000;
}

/*Yellow button*/
#yellow {
	background-color: #ede212;
	border-radius: 30%;
	padding: 30px;
	border: 5px solid #fffa00;
}

/*Blue button*/
#blue {
	background-color: #0000ce;
	border-radius: 30%;
	padding: 30px;
	border: 5px solid #0059ff;
}
/*===================================*/
/*======Modal for Instructions======*/
/*=================================*/

/*Element ID to be manipulated*/
#how {
	display: inline-block;
	text-align: center;
}

/*Hidden background information for modal pop-up*/
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow:  auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.5);
}

/*Actual modal display with text instructions*/
/*I want to add a small video to diplay how to play for visual learners*/
.modal-content {
	background-color: #fefefe;
	margin: 15% auto;
	padding: 20px;
	border: 5px solid #888;
	width: 80%;
}

/*Closing modal with button*/
.close {
	color: #aaa;
	float: right;
	font-size: 24px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}