body {
	height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #dddddd;
	font-family: 'Varela', sans-serif;
}
#page-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
h1 {
	font-family: 'Varela Round', sans-serif;
	margin-bottom: 0.25em;
}
#sudoku-blurb {
	width: 325px;
	text-align: justify;
	margin-bottom: 2em;
}
form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
}
#puzzle-container {
	position: relative;
}
#puzzle-overlay {
	width: 325px;
	height: 325px;
	position: absolute;
	background-color: rgba(0,0,0,0.25);
	z-index: 5;
	display: none;
}
#loading-svg-div {
	height:50px;
	width:50px;
	position: absolute;
	left: calc(50% - 25px);
	top: calc(50% - 25px);
	animation: spin 2s infinite linear;
}
table {
	background-color: white;
	border-spacing: 0;
	table-layout: fixed;
	width: 325px;
	height: 325px;
	position: relative;
}
tr {
	width: 100%;
	margin: 0;
	padding: 0;
}
td {
	margin: 0;
	padding: 0;
	height: auto;
	text-align: center;
}
.top-border-thick {
	border-top: 2px solid black;
}
.bottom-border-thick {
	border-bottom: 2px solid black;
}
.bottom-border-thin {
	border-bottom: 1px solid darkgray;
}
.left-border-thick {
	border-left: 2px solid black;
}
.right-border-thick {
	border-right: 2px solid black;
}
.right-border-thin {
	border-right: 1px solid darkgray;
}
input[type="text"] {
	font-size: 125%;
	width: 100%;
	height: 100%;
	/*padding: 17px 0;*/
	box-sizing: border-box;
	text-align: center;
	border: none;
}
.puzzle-button {
	background-color: white;
	border: 1px solid #333;
}
.puzzle-button:hover {
	color: white;
	background-color: #22b;
}
.solving-button {
	background-color: #999;
	border: 1px solid #333;
}
.clear-button {
	background-color: #d44;
	color: white;
	border: 1px solid #d44;
}
.clear-button:hover {
	background-color: #a00;
}
#error-messages {
	padding: 0 0.5em;
	margin-bottom: 0;
	margin-top: 0.5em;
	visibility: hidden;
	font-family: 'Varela', sans-serif;
	color: red;
	max-width: 325px;
}
#error-messages span {
	white-space: nowrap;
}
#submit-panel {
	width: 325px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
}
input[type="submit"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	border-radius: 8px;
	font-family: 'Varela', sans-serif;
	padding: 0.5em 1em;
	margin-top: 1em;
}
.submit-buffer {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1em;
}
#clear-solved {
	width: 35px;
	height: 35px;
	transition: transform 0.25s ease;
	cursor: pointer;
	display: none;
}
#clear-solved:hover {
	transform: rotate(-60deg);
}
#clear-solved:hover .svg-stroke {
	stroke: #d44;
}
.svg-stroke {
	stroke: #44d;
	transition: stroke 0.25s ease;
}
footer {
	width: 325px;
	background-color: white;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: transparent;
	font-family: 'Varela', sans-serif;
}
footer a {
	color: blue;
	text-decoration: underline;
}
footer a:hover {
	color: #a0f;
	text-decoration: none;
}

@media (min-width: 576px ) {
	#sudoku-blurb {
		width: 500px;
	}
	#puzzle-overlay {
		width: 500px;
		height: 500px;
	}
	table {
		width: 500px;
		height: 500px;
	}
	input[type="text"] {
		/*padding: 25px 0;*/
		font-size: 150%;
	}
	#error-messages {
		max-width: 500px;
	}
	#submit-panel {
		width: 500px;
	}
	footer {
		width: 500px;
	}
}