html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,  footer, header, hgroup,
menu, nav, section, summary, time, mark, audio, video, button, input, select, textarea {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	background:transparent;
	font-family: Ubuntu ,sans-serif;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, a, img {
    display:block;
}
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }

html, body {
	font-size: 10px;
	height: 100vh;
}

a {
	text-decoration: none;
}

.bold {
	font-weight: 900;
}

:root {
	--border-color: #868686;
}

button,
.modal div.button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	margin: 5px;
	text-align: center;
}
button.button,
.modal div.button {
	border-radius: 30px;
	padding: 10px 20px;
	background-color: var(--button-color);
	color: var(--text-button-color);
	font-size: 16px;
	font-weight: bold;
}

button[type="submit"] {
	background-color: var(--submit-color);
	font-weight: normal;
	margin: 0;
}

.back-button {
	margin: 20px 0 0 0;
	align-self: start;
	font-size: 20px;
	font-weight: normal;
	color: var(--button-color);
	border-bottom: 2px solid var(--button-color);
}

button.button:not(.disabled):hover,
.modal div.button:not(.disabled):hover,
.abutton:not(.disabled):hover {
	background-color: var(--secondary-color);
}

.abutton {
	border-radius: 2.4em;
	padding: 9px 26px;
	background-color: var(--button-color);
	color: var(--text-button-color);
	font-size: 1.1em;
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
}

header {
	display: grid;
	grid-template-columns: 64px 1fr 64px;
	grid-template-rows: max-content 8px;
	grid-template-areas:
		"left center right"
		"underline underline underline";
	align-items: center;
	justify-content: center;
	background-color: var(--header-color);
}

header .center {
	grid-area: center;
	height: 88px;
	display: flex;
	justify-content: center;
	margin: 12px 0;
}
header .center a {
	align-self: center;
}
header .center img {
	max-width: calc(100vw - 128px);
	max-height: 88px;
}

header .left {
	grid-area: left;
}

header .right {
	grid-area: right;
}

header .underline {
	grid-area: underline;
	background-color: var(--secondary-color);
	height: 100%;
}

button.menu svg path {
	stroke: var(--icon-color);
}
nav button.close svg path {
	fill: var(--text-highlight-color);
}
nav .footer svg path {
	fill: var(--text-highlight-color);
}

nav {
	color: var(--text-highlight-color);
	text-align: center;
	position: fixed;
	top: 50px;
	left: calc(100vw / 2 - 125px);
	display: none;
	font-size: 13px;
	width: 250px;
}

nav .abutton {
	font-size: 12px;
}

nav.open {
	display: block;
}

nav .nav-container {
	box-shadow: 0px 3px 6px #00000029;
	padding: 20px 0;
	border-radius: 15px;
	background-color: #FFFFFF;
	position: relative;
	z-index: 100;
	overflow-y: auto;
}

nav .nav-container .items {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 0 20px;
	max-height: calc(100vh - 40px - 64px - 48px); /* compensate for padding and positioning */
}

nav .nav-container .items > div {
	margin: 20px 0 0 0;
}

nav .nav-container .items > .footer {
	margin-bottom: 0;
	margin-top: 20px;
}

nav .nav-container .label {
	margin-bottom: 8px;
}

nav .nav-container .header {
	display: grid;
	grid-template-columns: 25px 1fr 25px;
	grid-template-areas: ". title close";
	padding: 0 20px;
}

nav .nav-container .header .title {
	grid-area: title;
	font-size: 18px;
	font-weight: bold;
	align-self: end;
}

nav .nav-container .header .close {
	grid-area: close;
	display: block;
	justify-self: end;
	align-self: center;
	margin: 0;
}

nav .nav-container .header .close svg {
	display: block;
}

nav .overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 50;
}

nav .label span {
	padding: 0;
}

nav .label span.bold {
	font-weight: bold;
}

.container {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

.main {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 0 30px;
	background-color: #FFFFFF;
	flex: 1 1 auto;
	width: calc(100% - 60px); /* compensate for padding and margin */
	align-self: center;
}

.main > article {
	margin-top: 34px;
	flex: 1 1 auto;
	width: 100%;
}

.main > article > h1,
.main > article > p.msg_intro {
	text-align: center;
}

.main > article > h1 {
	font-size: 25px;
	margin-bottom: 6px;
}

.main > article .portalitem h2 {
	font-size: 20px;
}

.main > article p.msg_intro {
	font-size: 13px;
}

.main > footer {
	align-self: center;
	margin: 20px 0;
}

.main > footer svg path {
	fill: #000000;
}

.portalitem {
	display: grid;
	margin: 35px 0;
	gap: 35px;
}

.contentdisabled {
	opacity: 0.5;
	pointer-events: none;
	user-select: none;
}

table {
	width: 100%;
	text-align: center	;
}
thead {
	background-color: #F2F2F2;
}
thead th {
	font-size: 8px;
	font-weight: normal;
	padding: 14px 5px;
}
thead th:first-child {
	border-top-left-radius: 15px;
	padding-left: 14px;
	text-align: left;
}
thead th:last-child {
	border-top-right-radius: 15px;
	padding-right: 14px;
}

tbody tr:nth-child(even) {
	background-color: #F2F2F2;
}
tbody td {
	padding: 14px 0;
	font-size: 10px;
}
tbody tr td:first-child {
	padding-left: 14px;
	text-align: left;
}
tbody tr td:last-child {
	padding-right: 14px;
}
tbody tr:last-child td:first-child {
	border-bottom-left-radius: 15px;
}
tbody tr:last-child td:last-child {
	border-bottom-right-radius: 15px;
}

.status.available
{
	background-color: #777;
}
.status.started
{
	background-color: #f60;
}
.status.wrong
{
	background-color: #c55;
}
.status.correct, .status.done
{
	background-color: #0c0;
}

@media screen and (min-width: 1024px) {
	html {
		overflow-y: scroll;
	}
	
	.back-button {
		margin: 37.5px;
		position: absolute;
		left: max(155px, (100vw - 1400px) / 2);
	}

	body > .container {
		background-color: var(--tertairy-color);
	}
	header .menu {
		display: none;
	}
	nav {
		display: block;
		left: max(30px, (100vw - 1690px) / 2);
		top: max(120px, min(328px, (100vh - 344px) / 2));
	}
	nav .nav-container .header .close {
		display: none;
	}
	nav .overlay {
		display: none;
	}
	nav .nav-container  .items {
		max-height: calc(100vh - 40px - 180px); /* compensate for padding and positioning */
	}
	.main {
		margin: 0 155px;
		padding: 0 155px;
		text-align: left;
		width: calc(100% - 620px); /* compensate for padding and margin */
		max-width: 1100px;
	}

	.main > article > h1 {
		font-size: 50px;
	}

	.main > article .portalitem h2 {
		font-size: 23px;
	}

	.main > article p.msg_intro {
		font-size: 24px;
		padding: 0 6px;
	}
	thead th {
		font-size: 16px;
	}
	tbody td {
		font-size: 18px;
	}
}