:root
{
	--alive: white;
	--dead: black;
	--border-color: white;
	--square: 15px;
	--world: 70; 
	--comp: var(--color3);
	--user: var(--color2);
}
	
div#game-events > p:nth-child(even) {margin-bottom: 20px;}
div#game-events > p {font-size: 25px;}
.user {color: var(--user);}
.computer {color: var(--comp);}
h3.user, h3.computer {text-shadow: 1px 1px var(--offwhite);}

span.toggle 
{
	font-size: 20px;
	padding: 5px 10px;
	display: inline-block;
	cursor: pointer;
	margin-top: 20px;
	border-radius: 5px;
}
div.toggle-wrap {position: absolute;	top: -65px;	right: 0;}
span.toggle.active {border: 1px solid var(--offwhite);}
.bubble-bug {border-radius: 50%;}
.pixel-bug {border-radius: 1px;}

div#game-events > p.player-block.user {background-color: pink;}

div#game-events > h2 
{
	font-size: 55px;
	margin: 10px 0;
	color: var(--color5);
	text-shadow: 1px 1px var(--offwhite);
}
div#game-events
{
	background-color: black;
	padding: 25px;
	top: 270px;
	width: calc(var(--width) - 4%);
	position: absolute;
	border: 20px double var(--offwhite);
	bottom: 20px;
	color: var(--color4);
	overflow-y: auto;
	border-radius: 20px;
}
button:hover {transform: scale(1.025);}
button
{
	padding: 20px;
	color: var(--color1);
	font-size: 30px;
	cursor: pointer;
	background-color: black;
	border: 1px solid var(--offwhite);
	border-radius: 15px;
	outline: none;
	transition: transform 500ms;
}
h2#game-message {color: var(--color3); font-size: 60px; height: 100px;}
div.world 
{
	display: flex;
	flex-wrap: wrap;
	width: calc(var(--square) * var(--world));
	margin: 20px auto;
}
div.cell.alive.user-color {background-color: var(--user);}
div.cell.alive.computer-color {background-color: var(--comp);}

div.cell
{
	cursor: pointer;
	width: var(--square);
	height: var(--square);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	font-family: tahoma;
	border: 1px solid black;
}