.pixel {
	background-color: white;
	border: 1px solid rgb(0, 0, 0);
	width: 40px;
	height: 40px;
}

h1 {
	font-family: 'Nabla', cursive;
	font-size: 2.5em;
	margin: 0 0 calc(var(--space) * 0.01);
	text-shadow: 0.05em 0.05em 0 gray;
	text-align: center;
}

p {
	margin: 0;
	text-align: center;
	color: rgb(71, 71, 71);
	font-size: 0.8em;
}

body {
	--space: clamp(1rem, 2vw, 1.5rem);
	--shadow: 0.6rem 0.6rem 0 gray;
	font-family: 'VT323', monospace;
	font-size: 1rem;
	margin: 0;
	background: rgb(255, 197, 130);
	accent-color: rgb(6, 26, 24);
	min-height: 100vh;
	display: flex;
	align-items:flex-start ;
	justify-content: center;
	margin-bottom: 30px;
}

button:hover,
button:focus-visible {
	background: rgb(255, 196, 0);
	cursor:pointer;
}

header {
	outline: 0.2rem rgb(255, 115, 0) solid;
	padding: var(--space)*0.8;
	margin-top: calc(var(--space) );
	margin-bottom: calc(var(--space) );
	box-shadow: var(--shadow);
	background: rgb(231, 229, 226);
}

header p{
	padding: 0.36rem;
}

.wrapper {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#color-palette{
	gap: 0.36rem;
}

#newBoardInput{
	padding: 0;
}

footer {
	width: 100%;
	text-align: center;
	color: #ffffff;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	font-weight: 700;
	height: auto;
	margin-top: 2rem;
}


.socialMedia {
	font-size: larger;
	margin-top: 6px;
}

.socialMedia>a {
	margin: 10px;
}

a {
	text-decoration: none;
	color: black;
}

a:hover {
	color: rgb(255, 115, 0);
}