@font-face {
  font-family: Open Sans;
  src: url('fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf') format("truetype-variations");
  font-weight: 1 999;
  font-style: normal;
}
@font-face {
  font-family: Open Sans;
  src: url('fonts/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.ttf') format("truetype-variations");
  font-weight: 1 999;
  font-style: italic;
}


/* Variable declarations */
:root {
	color-scheme: light dark;
	
	--highlight: light-dark(rgb(150,20,20), rgb(150,20,20));
	--highlight-alt: light-dark(rgb(150,150,135), rgb(20,20,20));
	--highlight-reverse: light-dark(rgb(20,130,20), rgb(20,130,20));
	
	--highlighted: color-mix( in srgb, var(--highlight) 80%, white);
	--highlighted-reverse: color-mix( in srgb, var(--highlight-reverse) 80%, white);
	
	--bghighlight: light-dark(rgb(255,245,245), rgb(25,15,15));
	--bghighlight-alt: light-dark(rgb(250,250,235), rgb(40,40,40));
	
	--bgcolor: light-dark(rgb(220,220,220), rgb(20,20,20));
	--fgcolor: light-dark(white, rgb(0,0,0));
	--bgcolorlight: light-dark(rgb(245,245,245), rgb(15,15,15));
	--bginfobox: light-dark(rgb(245,245,245), rgb(40,40,40));
	
	--color: light-dark(rgb(40,40,40), rgb(235,235,235));
	
	--bgheadingcolor: light-dark(black, rgb(40,40,40));
	--headingcolor: light-dark(white, white);
	
	--max-width: 1240px;
	--max-article-width: 800px;
	--spacer-width: 30px;
	--padding-standard: 15px;
	--padding-block: 0px;
	
	--padding-form-inputs: 10px;
	--padding-form-buttons: 20px;
}

*, *::before, *::after {
  box-sizing: border-box;
}


/*	Website structure  */

html {
	font-family: 'Open Sans', sans-serif;
	line-height: 1.8;
	font-size:1rem;
	background-color:var(--bgcolor);color:var(--color);
}


body {
	margin: 0;
	width:100%;
	hyphens: auto;
}

main {
	font-size:100%;
}

/* #links: link definitions */

a {
	text-decoration:underline;
	color: inherit;
}

a.image {
	border:0px;
	background-color:none;
	line-height:1;
	padding:0;
}

a.image:hover {
	border:0px;
	background-color:none;
}

a.link {
	color: var(--highlight);
	font-weight:bold;
	text-decoration:none;
	border-bottom:0px solid var(--highlight);
	transition: all 0.1s ease-in;
}

a.link:hover {
	color: var(--highlighted);
	font-weight:bold;
	text-decoration:none;
	border-bottom:3px solid var(--highlighted);
	transition: all 0.1s ease-in;
}

a.buttonlink {
	display:inline-block;
	padding:0.6em 1.6em;
	font-weight:600;
	color: var(--headingcolor);
	text-decoration:none;
	background-color:var(--highlight-reverse);
	transition: all 0.2s ease-in;
	border-radius:999px;
}
@media (prefers-color-scheme: light) {
	a.buttonlink {box-shadow: 8px 8px 8px -2px var(--highlight-alt);}
}


a.buttonlink:hover {
	color: var(--headingcolor);
	background-color:var(--highlighted-reverse);
	transition: all 0.2s ease-in;
	text-decoration:none;
	border:none;
}

a.button {
	display:inline-block;
	padding:10px 20px;
	font-weight:normal;
	color: var(--headingcolor);
	background-color:var(--highlight);
	transition: all 0.2s ease-in;
	border:0;
}

a.button:hover {
	color: var(--headingcolor);
	background-color:var(--highlighted);
	transition: all 0.2s ease-in;
}

/***********************************/
/* #headings: headings definitions */
/***********************************/

h2 {
	margin:0;
	margin-bottom:0.7em;
	margin-top:0.0em;
	font-size:200%;
	font-weight:100;
}
@media (width <= 800px) {
	h2 {
		font-size:160%;
	}
}


h3 {
	margin:0;
	margin-bottom:0.3em;
	margin-top:1.5em;
	font-size:180%;
	font-weight:400;
	color:var(--highlight);
}
@media (width <= 800px) {
	h3 {
		font-size:140%;
	}
}

h4 {
	margin:0;
	margin-bottom:0em;
	margin-top:1em;
	font-size:100%;
	font-weight:bold;
}

/*************************************/
/* #paragraph: paragraph definitions */
/*************************************/

p {
	margin:0;
	margin-bottom:0.7em;
	margin-top:0.3em;
}

p.spacer {
	height: 2em;
}

p.important {
	border:2px solid var(--highlight-alt);
	border-width: 1px 1px 1px 1px;
	padding:0.7em 1.6em;
	background-color:var(--bghighlight-alt);
	border-radius:3px;
	margin: 1.5em 0;
	box-shadow: 8px 8px 8px -4px var(--highlight-alt);
}
@media (prefers-color-scheme: dark) {
	p.important {box-shadow: none;}
}

p.cite {
	text-align:center;
	font-size:180%;
	font-weight:600;
}
@media (width <= 800px) {
	p.cite {
		text-align:center;
		font-size:160%;
	}
}


/* #manipulation: manipulation classes */
.width50 {max-width:50%; height:auto;}
.width100 {width:100%; height:auto;}
.width160px {max-width:160px;height:auto;}
.width200px {max-width:200px;height:auto;}
.logo {max-width:200px;height:auto;}

@media (width <= 800px) 
{
	.logo {max-width:150px;height:auto;}
}
.rectangle {padding: 12px 16px;background-color:var(--highlight);}
.align-center {text-align: center;}
.infobox {border-radius:3px;padding:1em;box-shadow: 8px 8px 8px -4px var(--highlight-alt);background-color:var(--bginfobox);}

.invert {filter: invert(0);}
@media (prefers-color-scheme: dark) {
	.invert {filter: invert(1);}
}


/* General classes */
.bgwhite {background-color:white;}
.bgcolor {background-color:var(--bgcolor);}
.bgcolorlight {background-color:var(--bgcolorlight);}
.fgcolor {background-color:var(--fgcolor);}
.bghighlight {background-color:var(--highlight);}

.bgtransparent {background-color:none;}

.separator-bottom {border-bottom:2px solid var(--highlight);}
.spacer {height:30px;}
.sticky {position: sticky; top:0;}
.bigger {font-size:120%;}
.nomargin {margin:0;}
.spacetop {padding-top:2em;}

/* Standard format of building blocks of website */
/* #header, #main, #footer */
.full {
	width:100%;
}

.block {
	padding:var(--padding-block) max(calc(((100% - var(--max-width)) / 2)), var(--padding-block));
}

.flexbox {
	display: flex;
}

.cssinfobox {
	display: block;
	background-color:gray;
	color:white;
	position:fixed;
	top:10px;
	left:10px;
	text-align:center;
	padding:10px;
	border:2px solid white;

	@supports ( (--a: 0)) {
		display: none;
	}
}

/* #header: Header definitions */
header.main {z-index:2;box-shadow: 0px 0px 10px 0px var(--highlighted);line-height:1;}
header.main nav.large {display: none;}
header.main nav.small {display: none;}
header.main nav > ul {display:flex;gap:0.5em;list-style: none;padding:0;margin:0;}
header.main nav > input {display:none;}
header.main > div.flexbox {display:flex;justify-content:space-between;align-items:center;padding:var(--padding-standard);}
@media (width >= 720px) {
	header.main {padding-top:var(--padding-standard);padding-bottom:var(--padding-standard);}
	header.main nav.large {display: inline;}
	header.main nav.small {display: none;}
	}

/* #mainmenu: Mainmenu definitions */

ul.mainmenu > li > a {text-decoration:none;display:inline-block;padding:0.6em 1.4em;font-weight:normal;color: var(--headingcolor);transition: all 0.2s ease-in;border-radius:999px;}
ul.mainmenu > li > a:hover {color: var(--headingcolor);background-color:var(--highlighted);transition: all 0.2s ease-in;}

.currentpage {
	background-color:var(--highlighted);
	transition: all 0.2s ease-in;
}

/* #popupmenu */
label.label-popupmenu {
	position:fixed;
	top:0;
	right:1em;
	padding: 1em 2em 1em 2em ;
	background-color:white;
	border-radius:0em 0em 3px 3px;
	color:black;
	transition: all 0.5s ease-in;
}
@media (width >= 720px) {
	label.label-popupmenu  {
		display:none;
	}
	input.input-popupmenu + div {
		display:none !important;
	}
}

label.label-popupmenu:has(+input:checked) {
	padding: 2em 2em 1em 2em;
	transition: all 0.5s ease-in;
}

input.input-popupmenu {
	appearance: none;
	display:none;
	padding:0;
	margin:0;
	border:0;
	pointer-events:none;
}

input.input-popupmenu + div {
	display:grid;
	grid-template-rows: 0fr;
	padding:0;
	margin:0;
	transition: all 0.2s ease-in;
	overflow:hidden;
	> ul {
		overflow: hidden;
	}
}

input.input-popupmenu:checked + div {
	grid-template-rows: 1fr;
	transition: all 0.2s ease-in;
	padding:var(--padding-standard);
}

ul.popupmenu {
	padding:0em 2em 0em 2em;
	margin:0;
	list-style:none;
	font-size:140%;
	text-align: center;
}

ul.popupmenu li {
	padding-top:1em;
	margin:0;
}

ul.popupmenu li:first-child {
	padding-top:0;
}

ul.popupmenu li a {
	color:var(--headingcolor);
	font-weight:200;
	text-decoration:none;
	border-bottom:0px solid var(--highlighted);
	transition: all 0.1s ease-in;
}

ul.popupmenu li a:hover {
	border-bottom:3px solid var(--highlighted);
	transition: all 0.1s ease-in;
}

ul.popupmenu li.separator {
	height:0;
	border-bottom:1px solid var(--headingcolor);
}


/* #footer: Footer definitions */
footer.main > div.flexbox {display:flex;flex-wrap:wrap;gap:3em;justify-content:start;align-items: center;padding:var(--padding-standard);}
@media (width <= 800px) {
	footer.main > div.flexbox {display: block;}
	}

/* #section: Section definitions */
section.standard {scroll-margin-top: 5em;}
section.standard > div.flexbox {display:flex;justify-content:space-between;padding:var(--padding-standard);}
section.spacing {padding-top: 3em;padding-bottom:0em;}

/* #article: article definitions */
article.standard {padding:var(--padding-standard);}
article.articleblock {padding:var(--padding-standard) max(calc(((100% - var(--max-article-width)) / 2)), var(--padding-standard));}
article > h1 {line-height:1; margin:0;margin-bottom:1.2em;margin-top:1em;font-size:300%;padding:0.8em 1em;background-color:var(--bgheadingcolor);color:var(--headingcolor);font-weight:500;width:fit-content;}
@media (width <= 650px) {
	article > h1 {margin:0;margin-bottom:1.5em;font-size:160%;width:100%;text-align:center;border-radius:3px;}
	}


article.flex {display:flex;justify-content:center;overflow:hidden;gap:1em;flex-wrap:wrap;}

article > div.imgtext {display:flex;justify-content:space-between;margin-bottom:50px;}
article > div.imgtext:nth-of-type(odd) {flex-direction:row-reverse;}
article > div.imgtext > div:nth-child(1) {flex-basis:44%;max-width:100%}
article > div.imgtext > div:nth-child(2) {flex-basis:54%;max-width:100%}
article > div.imgtext > div > img{width:100%;height:auto;}


@media (width <= 850px) {
	article > div.imgtext {display:block;max-width:100%;}
	
	}

article > div.two_columns {display:flex;justify-content:space-between;margin-bottom:50px;}
article > div.two_columns > div {flex-basis:48%;max-width:100%}
article > div.two_columns > div > img{width:100%;height:auto;}
@media (width <= 800px) {
	article > div.two_columns {display:block;max-width:100%;}
	
	}

article.flex2 {display:flex;justify-content:center;gap:1em;overflow:hidden;padding-bottom:3em;}
@media (width <= 800px) {
	article.flex2 {display:block;text-align:center;}
}

article.flex3 {display:flex;justify-content:space-between;overflow:hidden;}
article.flex3 > div {flex-basis:32%;text-align:center;}
article.flex3 > div > img {width:100%;height:auto;}
article.flex3 > div > h2 {display:inline;margin:0;padding:0;font-size:160%;text-align:center;font-weight:400;}
article.flex3 > div > p {text-align:center;padding-bottom:1em;}

@media (width <= 950px) {
	article.flex3 {display:block;}
	article.flex3 > div {flex-basis:30%;}
	article.flex3 > div > img {width:100%;max-height:200px;}
	.infobox {border-radius:3px;padding:1em;margin-bottom:0.2em;background: transparent;box-shadow:none;}
	/*
	.infobox:first-child {border-radius: 36px 36px 3px 3px;}
	.infobox:last-child {border-radius: 3px 3px 36px 36px;}
	*/
	.infobox:last-child {margin-bottom:1em;}
}

@media (width <= 950px) and (prefers-color-scheme: dark) {
	.infobox {border-radius:3px;box-shadow:none;padding:1em;background: var(--bginfobox);margin-bottom:0.2em;}
	/*
	.infobox:first-child {border-radius: 36px 36px 3px 3px;}
	.infobox:last-child {border-radius: 3px 3px 36px 36px;}
	*/
}

@media (prefers-color-scheme: dark) {
	.infobox {box-shadow: none;}
}

/* #index: specific index-page declarations */
section.banner {background-image: url("img/banner_new.jpg"); background-position: top center;height:500px;}
@media (prefers-color-scheme: dark) {
	section.banner {background-image: url("img/banner_green_dark.jpg"); background-position: bottom center;background-size:auto;}
}
@media (width <= 800px) {
	section.banner {
		height:300px;
		background-size: auto 300px;
		}
	
	}

p.huge {font-size:300%;width:fit-content;padding:0.3em 1em 0.3em 1em;background-color:var(--bgheadingcolor);color:var(--headingcolor);font-weight:500;}
@media (width <= 800px) 
{
	p.huge 
	{
		font-size:180%;
	}
	
}

@media (width <= 600px) 
{
	p.huge 
	{
		font-size:140%;
	}
	
}

/* #forms: specific declarations for forms */

button {
	font-size:100%;
	padding: 15px 25px;
    background-color: var(--highlight-reverse);
    color: var(--headingcolor);
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: var(--highlighted-reverse);;
}
input,
textarea {
	width: 100%;
	padding: var(--padding-form-inputs);
	margin-bottom: var(--padding-standard);
	border: 1px solid var(--bgcolor);
	border-radius: 5px;
	color:var(--color);
	background-color:var(--fgcolor);
}

textarea {
	resize:vertical;
}

input:focus,
textarea:focus {
	outline: none;
}

.form-contact {
    width: 100%;
    max-width: 500px;
}

#topBtn {
  margin:0;
  display: none;
  line-height: 1;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 14px;
  border: none;
  outline: none;
  background:var(--highlight);
  opacity: 0.5;
  color: var(--headingcolor);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 999px;
  transition: all 0.2s ease-in;
}

#topBtn:hover {
  background-color:var(--highlighted);
  opacity: 1;
  transition: all 0.2s ease-in;
}