/* Copyright (c) 2017 MIT 6.813/6.831 course staff, all rights reserved.
 * Redistribution of original or derived work requires permission of course staff.
 */

/* REMOVE ME - dashed lines and height for debugging */
body {
}

/* -------------------------------------------------------------------------------------------------------------------------------------*/
/* everything below this line is Main column */
/* -------------------------------------------------------------------------------------------------------------------------------------*/
#mainColumn {
	height: 965px;
}

#candyBoard {
	position: absolute;
	top: 20%;
	left: 8%;
	border: 3px solid black;
  	width: 320px;
  	height: 320px;
}

td{
  padding: 20px;
  border: 1px solid black;

}
/* -------------------------------------------------------------------------------------------------------------------------------------*/
/* everything below this line is first column */
/* -------------------------------------------------------------------------------------------------------------------------------------*/


#firstColumn {
	height: 965px;
	padding: 100px;
}

.new-game-btn{
	position: absolute;
	border: none;
	top: 55%;
	left: 27%;
	width: 45%;
	background-color: #bfbfbf; 
}

.title-name {
	position: absolute;
	font-weight: bold;
	top: 40%;
	left: 0%;
	width: 100%;
	font-size: 40px;
	color: red;
	text-align: center;
}

.title-bottom {
	top: 50%
}
/* -------------------------------------------------------------------------------------------------------------------------------------*/
/* everything below this line is third column */
/* -------------------------------------------------------------------------------------------------------------------------------------*/
.up-button {
	position: absolute;
	width: 50px;
	height: 50px;
	top: 41%;
	left: 40%;
	padding: 13px 13px 13px 13px;
	background-color: #bfbfbf; 
}

.down-button{
	position: absolute;
	width: 50px;
	height: 50px;
	padding: 10px 10px 10px 10px;
	top: 52%;
	left: 40%;
	background-color: #bfbfbf; 
}

.left-button{
	position: absolute;
	width: 65px;
	height: 50px;
	top: 46.5%;
	left: 16.5%;
	padding: 13px 13px 13px 13px;
	background-color: #bfbfbf; 
}

.right-button{
	position: absolute;
	width: 65px;
	height: 50px;
	top: 46.5%;
	left: 57.5%;
	padding: 13px 13px 13px 13px;
	background-color: #bfbfbf; 
}

.crush-button{
	position: absolute;
	top: 60%;
	left: 28%;
	background-color: #bfbfbf; 
}
.Move{
	position: absolute;
	font-size: 30px;
	top: 35%;
	left:12%;
}

.player-input{
	position: absolute;
	width: 50px;
	top: 36.3%;
	left:42%;
	display: inline-block;
}

.material-icons{
	align-items: center;
	justify-content: center;
}