
// Define Colors:
$heavy: #272932;
$bright-blue: #00dffc;
$dark-blue: #274555;
$mint: #67D5B5;
$tan: #fff1b9;
$white: #FFFFF2;
$red: #FF484D;

// Define Fonts:
$Ubuntu: 'Ubuntu', sans-serif;

// Styling:
body {
  background: linear-gradient(to top right, $bright-blue, $mint) fixed no-repeat;
  color: $dark-blue;
  padding: 0;
  margin: 0;
  min-height: 625px;
  min-width: 1100px;
}

.infoBox {
	padding-left: 5px;
	color: rgb(25,25,25);
	width: 950px;
	margin: 10px auto -20px auto;
	a, a:visited {
		color: rgb(25,25,25);
		text-decoration: none;
	}
	a:hover {
		color: #2A7CFF;
	}
	.generationCount {
		padding-left: 150px;
		font-family: $Ubuntu;
		font-weight: bold;
		margin-left: 0px;
		font-size: 32px;
	}
}

.flexWrapper {
	display: flex;
	justify-content: center;
	.controlPanel {
		background: rgba(20,20,20,0.5);
		width: 150px;
		text-align: center;
		padding-top: 18px;
		margin-right: 5px;
		button {
			font-size: 22px;
			font-family: $Ubuntu;
			margin: 5px;
			padding: 5px 10px;
			border: none;
			background: $tan;
			width: 115px;
		}
		button:hover {
			background: $white;
			cursor: pointer;
		}
		button:focus {
			outline: none;
		}
		.speedBtns {
			padding-top: 18px;
			button {
				font-size: 22px;
				font-family: $Ubuntu;
				margin: 5px;
				padding: 5px 8px;
				border: none;
				width: 115px;
			}
			button:hover {
				cursor: pointer;
			}
		}
		.selectRandom {
			padding-top: 15px;

		}
	}
	.boardWrapper {
		padding: 25px;
		background: rgba(15,15,15,0.8);
		width: 800px;
		height: 480px;
		.board {
      background: none;
			width: 800px;
			height: 480px;
			padding-left: 1px;
			padding-bottom: 1px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}
		.gameBox:hover {
			cursor: pointer;
			background: $tan !important;
		}
	}
}