style.css

* {
	background-color: #efefef;
	font-size: 12px;
	font-family: Arial;
}

header {
	color: #0cd395;
	text-align: center;
}

header div {
	font-size: 5rem;
}

.container {
	width: 600px;
	margin: 50px auto;
	display: flex;
	justify-content: space-around;
}

.board {
	width: 416px;
}

.row {
	width: 416px;
	display: flex;
	flex-direction: row;
}
.cell {
	border: 1px solid #ccc;
	width: 52px;
	height: 50px;
	display: flex;
	justify-content: space-around;
}

.red, .yellow {
	height: 50px;
	width: 50px;
	border-radius: 50px;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
}

.red.drop, .yellow.drop{
	position: absolute;
	animation: drop 0.25s;
}

@keyframes drop {
	0% { opacity: 0.5; top: 110px; }
	25% { opacity: 0.5; top: 130px; }
	100% { opacity: 1; }
}

.red {
	background-color: red;
	background: -webkit-radial-gradient(#FF4400 50%, #DB0A0A 60%, #FF4400 70%); /* Safari 5.1 to 6.0 */
	background: -o-radial-gradient(#FF4400 50%, #DB0A0A 60%, #FF4400 70%); /* For Opera 11.6 to 12.0 */
	background: -moz-radial-gradient(#FF4400 50%, #DB0A0A 60%, #FF4400 70%); /* For Firefox 3.6 to 15 */
	background: radial-gradient(#FF4400 50%, #DB0A0A 60%, #FF4400 70%); /* Standard syntax */
}

.yellow {
	background-color: blue;
	background: -webkit-radial-gradient(#0900FF 50%, #0A04BD 60%, #0900FF 70%); /* Safari 5.1 to 6.0 */
	background: -o-radial-gradient(#0900FF 50%, #0A04BD 60%, #0900FF 70%); /* For Opera 11.6 to 12.0 */
	background: -moz-radial-gradient(#0900FF 50%, #0A04BD 60%, #0900FF 70%); /* For Firefox 3.6 to 15 */
	background: radial-gradient(#0900FF 50%, #0A04BD 60%, #0900FF 70%); /* Standard syntax */
}

.startSection {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

#startGame {
	border-radius: 50px;
	width: 150px;
	height: 56px;
	border: 3px solid #28F2B3;
	color: #0cd395;
	text-align: center;
	font-size: 28px;
	line-height: 56px;
}

#startGame:hover{
	cursor: pointer;
}