/* ||RESET */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ||BASE */
body {
	font-family: "Miranda Sans", sans-serif;
	line-height: 1.6;
	max-width: 100vw;
	min-height: 100vh;
	min-height: 100dvh;
	overflow: auto;

	/* *CENTER */
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

h1 {
	margin-bottom: 1rem;
}

button {
	font-family: inherit;
}

/* ||CONTAINER */
.container {
	display: flex;
	flex-wrap: wrap;
	width: 800px;
	height: 800px;
	outline: 2px solid black;
	outline-offset: -1px;
	overflow: hidden;
	border-radius: 7px;
	margin-bottom: 2rem;
}

.square {
	border: 1px solid rgb(165, 163, 163);
	width: 50px;
	height: 50px;
	background-color: white;
}

.new-square {
	border: 1px solid rgb(165, 163, 163);
	background-color: rgb(255, 255, 255);
}

/* ||GRID */
.grid-size {
	margin-bottom: 1rem;
	padding: 1rem 2.75rem;
	cursor: pointer;
}