/*
#header, #container, #settings, #footer {
	outline: 2px solid red;
}
*/

body {
	background-color: #e6e6e6;
}

/*header*/
#header { 
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 900px;
	margin: 0 auto;
}

.input {
	font-size: 20px;
}

.input button {
	font-size: 16px;
}

.warning {
	font-weight: bold;
	font-size: 20px;
}

/*container*/
#container {
	outline: 3px solid black;
	box-shadow: 10px 10px 0px rgba(0,0,0,0.3);
	height: 780px;
	width: 900px;
	display: flex;
	flex-direction: column;
	margin: 10px auto;
}

.cellsY {
	width: 100%;
	height: 100%;

	display: flex;
}

.cellsX {
	width: 100%;
	height: 100%;
}

/*settings*/
#settings {
	display: flex;
	justify-content: center;
	padding: 20px;
	gap: 10px;
}

#settings button {
	font-size: 20px;
	width: 200px;
}

/*footer*/
#footer {
	display: flex;
	justify-content: center;
}

/*general*/
button {
	all: unset;
	color: white;
	background-color: black;
	padding: 0px 20px;
	cursor: pointer;
}

/*optional class styles*/
.highlight {
	background-color: darkgray;
}