* {
	margin: 0;
	padding: 0;
}

html {
	--color-active: #7ff88ab;
	--color-page-background: #f5f5f5;
	--color-foreground: #001158;
	--color-content-background: #ffffff;
}

body {
	display: flex;
	flex-direction: column;

	background-color: var(--color-page-background);
	color: var(--color-foreground);

	font-family: Calibri, sans-serif;
	font-size: 19px;
	padding: 0vh 4vw;
}

header {
	display: flex;
	flex-direction: row;

	background-color: var(--color-content-background);
}

.header {
	flex: 1 1 0;

	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

main {
	display: flex;
	flex-direction: row;
}

img.centered  {
	width: 800px;
}

img.floating {
	width: 240px;
}

img.gallery {
	width: 800px;
	height: 150px;
}

.site {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.content {
	background-color: var(--color-content-background);
	background-color: var(--color-active);
	box-shadow: 1px 1px 20px rgb(0 0 0 / 7%);

	display: flex;
	flex-direction: column;

	padding: 2vh 2vw;
	padding-top: 0;
}

.content .item > * {
	margin: 1vh 1vw;
}

.row {
	display: flex;
	flex-wrap: wrap;
}

.item {
	display: flex;
	flex-direction: column;
	flex: 1;
}

div.news > *:first-child {
	margin-bottom: 1vh;
}

.news {
	font-size: 90%;
	padding: 2vh 2vw;
}

.news .item {
	border-bottom: 1px dotted #ccc;
	padding-bottom: 1vh;
}

.news .item:first-child {
	padding-bottom: 0vh;
}

.news .item .date {
	color: #666;
	font-size: 90%;
	font-style: italic;
	padding-top: 1vh;
}

.news .item .title {
}

.logo {
	width: 8em;
}

#menu-control {
}

.menu-control {
	display: none;
}

.menu {
	background-color: var(--color-page-background);
}

.menu a {
	border-bottom: 1px dotted #ccc;
	color: #666;
	text-decoration: none;
	display: block;
	padding-right: 2vw;
}

.menu ul ul a {
	padding-left: 1em;
}

.menu a:hover,
.menu a.selected {
	background-color: var(--color-foreground);
	color: var(--color-content-background);
}

.menu ul {
	list-style-type: none;
	list-style-position: outside;
	padding: 0;
}

.menu li {
	white-space: nowrap;
}

.menu li ul {
	display: none;
}

.menu li.active ul {
	display: list-item;
}

@media only screen and (max-width: 750px) {
	.menu {
		display: none;
	}
	.menu-control {
		display: block;
	}
	#menu-control:checked ~ .menu {
		display: inline;
		position: absolute;
		padding-bottom: 5vh;
	}
}