html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,
abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,
strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,
time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display: block;
}

ol,ul {
	list-style: none;
}

blockquote,q {
	quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after {
	content: '';
	content: none;
}

* {
	box-sizing: border-box;
}

html {
	height: 100%;
}

body {
	display: flex;
	height: 100%;
	flex-direction: column;
	line-height: 1;
	font-family: Helvetica, Arial, sans-serif;
	background: #000;
	color: #ddd;
	margin: 0 auto;
	user-select: none;
}

h1 {
	font-size: 2em;
	font-weight: bold;
	margin: .5em 0;
	text-align: center;
}

#status {
	margin: .5em auto;
	text-align: center;
	min-height: 3em;
	padding: 0 1em;
	overflow-y: auto;
	flex-grow: 1;
	user-select: text;
}

#sudoku-grid {
	margin: 1em auto;
	text-align: center;
}

table {
	border-collapse: collapse;
	border-spacing: 0;	
}

td {
	width: min(calc(100vw / 9), calc(50vh / 9));
	height: min(calc(100vw / 9), calc(50vh / 9));
	border: 1px dashed #444;
	font-size: min(8vw,5vh);
	vertical-align: middle;
	text-align: center;
}

#c00, #c01, #c02, #c03, #c04, #c05, #c06, #c07, #c08 {
	border-top: 0;
}

#c08, #c18, #c28, #c38, #c48, #c58, #c68, #c78, #c88 {
	border-right: 0;
}

#c80, #c81, #c82, #c83, #c84, #c85, #c86, #c87, #c88 {
	border-bottom: 0;
}

#c00, #c10, #c20, #c30, #c40, #c50, #c60, #c70, #c80 {
	border-left: 0;
}

#c20, #c21, #c22, #c23, #c24, #c25, #c26, #c27, #c28,
#c50, #c51, #c52, #c53, #c54, #c55, #c56, #c57, #c58 {
	border-bottom-style: solid;
	border-bottom-color: #ddd;
}

#c30, #c31, #c32, #c33, #c34, #c35, #c36, #c37, #c38,
#c60, #c61, #c62, #c63, #c64, #c65, #c66, #c67, #c68 {
	border-top-style: solid;
	border-top-color: #ddd;
}

#c02, #c12, #c22, #c32, #c42, #c52, #c62, #c72, #c82,
#c05, #c15, #c25, #c35, #c45, #c55, #c65, #c75, #c85 {
	border-right-style: solid;
	border-right-color: #ddd;
}

#c03, #c13, #c23, #c33, #c43, #c53, #c63, #c73, #c83,
#c06, #c16, #c26, #c36, #c46, #c56, #c66, #c76, #c86 {
	border-left-style: solid;
	border-left-color: #ddd;
}

td:not(.selected,.n1,.n2,.n3,.n4,.n5,.n6,.n7,.n8,.n9):hover {
	background-color: #333;
}

.selected {
	background-color: #555;
	border: 2px solid #ddd;
}

#numbers {
	display: flex;
	flex-grow: 1;
	align-items: center;
	justify-content: center;
}

.number {
	display: inline-flex;
	width: min(calc(100vw / 9), calc(50vh / 9));
	height: min(calc(100vw / 9), calc(50vh / 9));
	border-radius: 100%;
	font-size: min(8vw,5vh);
	align-items: center;
	justify-content: center;
	align-content: stretch;
}

.number:hover {
	filter: brightness(1.4);
}

.n1 {
	background-color: #330000;
	color: #ffcccc;
}

.n2 {
	background-color: #331A00;
	color: #ffe1c4;
}

.n3 {
	background-color: #333300;
	color: #ffffc2;
}

.n4 {
	background-color: #003300;
	color: #bdfebd;
}

.n5 {
	background-color: #223831;
	color: #c8fff4;
}

.n6 {
	background-color: #003333;
	color: #c4ffff;
}

.n7 {
	background-color: #00003f;
	color: #bfbfff;
}

.n8 {
	background-color: #1d003d;
	color: #debcff;
}

.n9 {
	background-color: #330033;
	color: #ffc0ff;
}

#buttons {
	display: flex;
	flex-grow: 1;
	align-items: center;
	justify-content: center;
}

#solve, #annotate {
	display: inline-flex;
	width: 40%;
	height: 10vh;
	border-radius: 1rem;
	padding-top: 2px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 3rem;
}

#solve {
	margin-right: 1rem;
	background-image: url(../fig/dash.svg);
	background-size: 7vh;
}

#annotate {
	background-image: url(../fig/pen.svg);
	background-size: 5vh;
}

#solve:hover, #annotate:hover {
	background-color: #333;
}