* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	/* display: none; */
	background-color: lightblue;
}
#discord_top {
	/*background-color: green;*/
	box-sizing: content-box;
	user-select: none;
}
#top_nav {
	margin: 0 auto;
	border: 2px solid deepskyblue;
	border-radius: 5px;
	width: 95vw;
	height: 7vh;
	box-sizing: content-box;
	user-select: none;
}
#board_info {
	margin: 0 auto;
	margin-top: 0.5vh;
	margin-bottom: 0.5vh;
	border: 2px solid deepskyblue;
	border-radius: 5px;
	width: min(54vh, 90vw);
	height: 3vh;
	box-sizing: content-box;
	user-select: none;

	/* Temporary for indication of incorrect value placement */
	transition: border-color 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.8);
}
#number_selections {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#number_selections .row {
	margin: 0 auto;
	margin-top: 1vh;
	width: min(56vh, 92vw);
	box-sizing: content-box;
	user-select: none;
	font-family: helvetica;

	display: flex;
/*			flex-wrap: wrap;*/
	justify-content: center;
	gap: calc(min(56vh, 92vw) / 14);
	
}
#number_selections .select_number {
	border: 1px solid rgba(173, 216, 230, 0.7);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	background: radial-gradient(circle at 30% 30%, #ffffff, lightblue);
	border-radius: 50%;
	width: calc(min(56vh, 92vw) / 7);
	height: calc(min(56vh, 92vw) / 7);

	display: grid;
	place-items: center;
}

#toggles {
	margin: 0 auto;
	margin-top: 1vh;
	border: 2px solid deepskyblue;
	width: min(54vh, 90vw);
	height: 10vh;
	box-sizing: content-box;
	user-select: none;
}
#board {
	margin: 0 auto;
	border: 2px solid dodgerblue; /* deepskyblue */
	background-color:gray;

	width: min(54.1vh, 90.1vw);
	height: min(54.1vh, 90.1vw);

	box-sizing: content-box;
	user-select: none;
}
.square {
	display: inline-block;
	float: left;
	background-color: #f3f3f3;

	width: calc(min(54vh, 90vw) / 9);
	height: calc(min(54vh, 90vw) / 9);

	user-select: none;

	image-rendering: pixelated;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -moz-crip-edges;
	background-size: contain;

	display: flex;
	flex-wrap: wrap;
	justify-contents: center;
}
.penned {
	font-family: helvetica;
	font-size: calc(calc(min(54vh, 90vw) / 9) * 0.8);
	line-height: calc(min(54vh, 90vw) / 9);
	text-align: center;
	display: block;
	
	width: calc(min(54vh, 90vw) / 9);
	height: calc(min(54vh, 90vw) / 9);

	display: grid;
	place-items: center;
}
.penciled {
	font-family: helvetica;
	font-size: calc(min(54vh, 90vw) / 27.9);
	display: inline-block;
	float: left;

	width: calc(min(54vh, 90vw) / 27.9);
	height: calc(min(54vh, 90vw) / 27.9);

/*			line-height: calc(min(54vh, 90vw) / 27.9);

	text-align: center;
*/
	display: grid;
	place-items: center;
}


                     #sq03, #sq04, #sq05,
                     #sq13, #sq14, #sq15,
                     #sq23, #sq24, #sq25,
#sq30, #sq31, #sq32,                      #sq36, #sq37, #sq38,
#sq40, #sq41, #sq42,                      #sq46, #sq47, #sq48,
#sq50, #sq51, #sq52,                      #sq56, #sq57, #sq58,
                     #sq63, #sq64, #sq65,
                     #sq73, #sq74, #sq75,
                     #sq83, #sq84, #sq85
{
	background-color: antiquewhite;
}
[data-y="0"], [data-y="1"], [data-y="2"], [data-y="3"], [data-y="4"], [data-y="5"], [data-y="6"], [data-y="7"] { border-bottom: 1px solid dodgerblue; }
[data-x="0"], [data-x="1"], [data-x="2"], [data-x="3"], [data-x="4"], [data-x="5"], [data-x="6"], [data-x="7"] { border-right: 1px solid dodgerblue; }
[data-y="2"], [data-y="5"] { border-bottom: 3px solid dodgerblue; }
[data-x="2"], [data-x="5"] { border-right: 3px solid dodgerblue; }
/* Temporary for indication of incorrect value placement */
[data-y="2"], [data-y="5"] { transition: border-color 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.8); }
[data-x="2"], [data-x="5"] { transition: border-color 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.8); }


.pencil-container {
	position: relative;
	transform: rotate(-5deg);
	width: 200px;
	height: 50px;
}
.pencil-body {
	border-top: 6.5px solid #ffd165;
	border-bottom: 6.5px solid #dfb450;
	width: 150px;
	height: 20px;
	background-color: #f0c96e;
	position: absolute;
	top: 15px;
	left: 15px;
}
.pencil-tip {
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 20px solid #ece5ca;
	position: absolute;
	left: 165px;
	top: 15px;
}
.pencil-eraser {
	width: 15px;
	height: 20px;
	background-color: #ff6fb7;
	position: absolute;
	left: 0px;
	top: 15px;
	border-top-left-radius: 7px;
	border-bottom-left-radius: 6px;
}
.pencil-eraser::before {
	content: '';
	position: absolute;
	width: 2px;
	height: 20px;
/*	background-color: #ccc;*/
	background: linear-gradient(#aaa, #ccc, #eee, #ccc, #aaa);
	left: 14px;
}