input, button, textarea, select {
  font: inherit;
}

body {
	font-family: sans-serif;
	font-size: 12pt;
}

h2 {
	text-align: center;
}

p {
	margin: 0;
	padding: 0;
}

p + p {
	margin-top: 1em;
}

nav {
	text-align: center;
}

header {
	font-size: 150%;
	text-align: center;
}

footer {
	color: #777;
}

/*div.mainpage {
	padding: 1em 5em;
}*/

nav input[type=button],
input[type=submit] {
	min-width: 4em;
}

table.puzzle {
	user-select: none;
	margin: 1em auto;
	border: 1px solid #ccc;
	background-color: #ccc;
	width: 96vw;
	height: 96vw;
}

table.puzzle td {
	font-weight: bold;
	font-size: 5.5vw;
	text-align: center;
	color: #77e;
	background-color: #fff;
	height: 8vw;
	width: 8vw;
	margin: 0;
	padding: 0;
}

table.puzzle td.puzzle-original {
	color: #000;
}

table.puzzle td.puzzle-invalid {
	background-color: #fdd;
}

table.puzzle td.puzzle-hint {
	background-color: #dfd;
}

table.puzzle td.puzzle-new {
	animation: blink 2 0.2s;
	-webkit-animation: blink 2s 0.2s;
}

@keyframes blink {
	from { background-color: #ff3; color: #f33; }
	to { background-color: #fff; color: #77e; }
}

@-webkit-keyframes blink {
	from { background-color: #ff3; color: #f33; }
	to { background-color: #fff; color: #77e; }
}

div.choices {
	max-width: 20em;
}

div.message, div.message2 {
	max-width: 24em;
	margin: 1em auto;
	padding: 0.5em 1em;
	text-align: center;
	border: 1px solid #66c;
	border-left-width: 3px;
	border-right-width: 3px;
}

div.display-objects.mlisting li {
	color: #6d6dbf;
	list-style-type: square;
	padding: 0;
	margin: 0 0 0.3em 0;
	cursor: pointer;
}

.center {
	text-align: center;
}

.columns {
	column-width: 9em;
}

.columns ul {
	margin-top: 0;
}

.columns ul li {
	margin-top: 0;
}


@media screen and (min-width: 600px) {

table.puzzle {
	width: inherit;
	height: inherit;
}

table.puzzle td {
	font-weight: bold;
	font-size: 120%;
	height: 1.6em;
	width: 1.6em;
}

}