body {
	font-family: sans-serif;
	background-color: #0176dc;
	margin: 0;
	padding: 0;
}

header {
	text-align: center;
}

h1 {
	margin-top: 0;
	padding-top: 10px;
}


.container {
	background-color: white;
	min-height: 100vh;
	padding: 10px;
	box-sizing: border-box;
}

.navbar {
	list-style-type: block;
	margin: 0 0 1cm;
	padding: 0px;
}

.navbar li {
	display: block; 
	margin: 1em 0;
}

.navbar li a:hover {
	background-color: #0176dc;
	color: white;
}

.navbar .active {
	background-color: #0176dc;
	color: white;
}

.navbar a {
	color: inherit;
	text-decoration: none;
}

.navbar li a {
	border-radius: 2em;
	padding: 10px;
}

.inactive {
opacity: 25%;
}

.textblock {
	max-width: 20cm;
	background-color: rgb(235, 245, 255);
	padding: 1cm;
	border-radius: 1em;
	margin: 1cm auto;
}

.textblock h2 {
	margin-top: 0;
}

.shorttextin {
	box-sizing: border-box;
	height: 1em;
	max-width: 100%;
	width: 50ch;
	border-color: silver;
	border-radius: 10px;
	padding: 1.5em 2ch;
	border-width: 1px;
	border-style: solid;
}

textarea {
	font-family: sans-serif;
	padding: 1.5em 2em;
	border: none;
	border-radius: 10px;
	max-width: 100%;
	min-width: 100%;
	box-sizing: border-box;
	border-color: silver;
	border-radius: 10px;
	padding: 1.5em 2em;
	border-width: 1px;
	border-style: solid;
}

button, .linkbox {
	border: none;
	border-radius: 10px;
	padding: 1em;
	background-color: #0176dc;
	color: white;
	margin: 1em 0;
}

.linkbox {
	display: block;
	max-width: 50ch;
	margin: 1em auto;
}

.linkbox:hover {
	background-color: #0176dccc;
}

button:hover {
	cursor: pointer;
	background-color: #0176dccc;
}

.grid-container {
	display: grid;
	grid-template-columns: auto;
}

.videoitem {
	margin: auto 1em;
}

.videoitem iframe {
	aspect-ratio: 16 / 9;
	width: 100%;
	border: none;
}

.tablewrapper {
	overflow: auto;
}

@media only screen and (min-width: 600px) {
	.container {
		width: auto;
		width: 95vw;
		max-width: 1500px;
		min-height:95vh;
		margin:auto;
			padding: 1vh;
			border-radius: 20px;
			margin: 1.5vh auto;
	}
	
	.navbar li{
		display: inline;
	}

	.headerimg {
		margin-bottom: -20px;
	}
}

@media only screen and (min-width: 1000px) {
	.grid-container {
		grid-template-columns: 50% 50%;
	}
	.videoitem {
		grid-area: 1 / 2;
	}	
}