/* Start Global Rules */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--black: #333;
	--gray: #ced4da;
	--green: #69db7c;
}

body {
	font-family: sans-serif;

	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

/* Start Grid */
.grid-container {
	display: flex;
	flex-wrap: wrap;
	width: 512px;
	height: 512px;
	border: 2px solid var(--green);
	box-sizing: content-box;
}

.grid-container > .cell {
	border: 1px solid var(--gray);
	border-collapse: collapse;
}

.grid-container > .cell.alive {
	background-color: var(--black);
}
/* End Grid */

/* Start Controls Container */
.controls {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 1rem;
}

.controls > button {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	border: none;
	font-size: 4rem;
	height: 2.2rem;
	cursor: pointer;
}

/* End Controls Container */