/* make everything non selectable */
.unselectable {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.flex-container {
	display: flex;
}

.flex-container > div {
	margin: 4px;
	padding: 4px;
	font-size: 24px;
}

.row { 
	-webkit-flex-direction: row; 
	flex-direction: row;
}
  
.row-reverse { 
	-webkit-flex-direction: row-reverse; 
	flex-direction: row-reverse;
}  

.column { 
	-webkit-flex-direction: column; 
	flex-direction: column; 
	float: left;
}

.column-reverse { 
	-webkit-flex-direction: column-reverse; 
	flex-direction: column-reverse; 
	float: right;
}

.board-bg {
	background-color: #207420;
	padding: 8px; 
	border-radius: 8px; max-width: 340px;
}

.board {
	font-size: 200%;
}

.board-container {
	display: flex;
}

.board-tile {
	text-align: center;
	margin: 8px;
	padding: 8px 8px 8px 8px;
	top: 50%;
	bottom: 50%;
	background: #fbe783;
	border-radius: 15px;
	font-size: 200%;
	min-width: 64px;
	min-height: 64px;
}

.timer {
	text-align: right;
	color: crimson;
	font-weight: bold;
}