body {
	box-sizing: border-box;
	font: 12pt sans-serif;
}
.list a, .list div {
	display: inline-block;
	width: 48px;
	height: 36px;
	font-weight: bold;
	line-height: 36px;
	border: 1px solid #aaa;
	margin: 8px 8px;
	text-decoration: none;
	color: black;
	text-align: center;
	user-select: none;
}
.list .unanswered { }
.list .right { background: #c0ffc0; }
.list .wrong { background: #ffc0c0; }

h1 { font: bold 12pt sans-serif; }
img.right, img.wrong {
	width: 100%;
	max-width: 300px;
	margin-top: 12px;
}
.message {
	color: red;
	margin-top: 8px;
}
input[type=number] {
	width: 120px;
}
form { display: inline-block; }
.overview {
	position: absolute;
	left: 50%;
	width: 600px;
	margin-left:-250px;
}
.overview > div {
	margin: 8px 0;
}
.overview .name, .overview .score, .overview .number {
	font: 24px sans-serif;
}
.overview .name {
	display: inline-block;
	width: 400px;
}
.overview .score {
	font-weight: bold;
	display: inline-block;
	text-align: right;
	width: 100px;
}
.overview .number {
	font: 18px sans-serif;
	display: inline-block;
	text-align: right;
	width: 100px;
}
.time {
	display: inline-block;
	position: absolute;
	bottom: 4px;
	left: 0px;
	right: 4px;
	text-align: right;
}
.question {
	page-break-inside: avoid;
}
.question ol {
	padding-left: 5mm;
}
.questlist {
	clear: both;
	column-count: 2;
	column-gap: 2cm;
}