.banner {
	width: 100%; 
	margin-top: -2em; 
	height: 200px; 
	object-fit: cover; 
	filter:brightness(0.7);
}

.square {
	width: 100%;
	aspect-ratio: 1;
	box-sizing: border-box;
	overflow: hidden;
	background-size: 300%; 
	background-position: center; 
	transition: background-size 0.5s ease;
}
.square:hover {
	background-size: 350%;
}
.squareContent {
	display: flex;
	align-items: flex-end;
	color: white;
	text-shadow: #000f 0 2px 10px;
	width: 100%;
	height: 100%;
	background-color: #0008;
}
.square .squareContentHidden {
	height: 0px;
	overflow: hidden;
	transition: height 0.2s ease;
}
.square:hover .squareContentHidden {
	height: 200px;
}
html {scroll-behavior: smooth;}
body {
	margin: 0;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 20px;
}
.circle {border-radius: 999px;}

h1 {font-weight: normal; font-size: 2em;}
h2 {font-weight: normal; font-size: 1.5em;}
h3 {font-weight: normal; font-size: 1.17em;}
h4 {font-weight: normal; font-size: 1.1em;}
h5 {font-weight: normal; font-size: 1.08em;}
h6 {font-weight: normal; font-size: 1.05em;}

/*
h1 is    32px    (2em)
h2 is    24px  (1.5em)
h3 is 18.72px (1.17em)
h4 is    16px    (1em)
h5 is 13.28px (0.83em)
h6 is 10.72px (0.67em)
*/

.lessNarrow{
	max-width: 100ex;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1em;
	padding-right: 1em;
}
.narrow {
	max-width: 80ex;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1em;
	padding-right: 1em;
}
i.icon	{
	font-family: 'Material Icons';
	font-style: normal;
}
img.icon {
	height: 1em;
}
nav {
	border-bottom: 1px solid #8883;
	padding: 1em 0 1em 0;
	margin-bottom: 2em;
}
footer {
	border-top: 1px solid #8883;
	padding: 1em 0 3em 0;
	margin-top: 2em;
}
a {
	text-decoration: none;
	color: #039be5 !important;
}
.flex {display: flex;}
ul.nodots {
	list-style-type: none;
	padding: 0;
}
ul.nodots li{
	margin: .5em 0 .5em 0;
}
li {
	margin: 0.5em 0 0.5em 0;
}

summary {
	cursor: pointer;
	background-color: #8880;
	transition: background-color 0.2s ease;
}

summary:hover {
	background-color: #8881;
}

#progress-bar {
	--scrollAmount: 0%;
	
	/*background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);*/
	background-color: #039be5;
	width: var(--scrollAmount);			
	height: 3px;
	position: fixed;
	top: 0;
}

.scrollToTopButton {
	border-radius: 999px;
	font-family: 'Material Icons';
	background-color: white;
	color: black;
	border: #8883 1px solid;
	box-shadow: #0001 0 5px 10px;
	padding: 0.7em;

	width: 1.2em;
	height: 1.2em;
	text-align: center;
	line-height: 100%;
	
	position: fixed;
	bottom: 2em;
	right: 1em;
}

.center {
	margin-left: auto;
	margin-right: auto;
}

.zoom {
  display: block;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
  position: relative;
	width: 100%;
}

.zoomed {
  cursor: -webkit-zoom-out;
	cursor: zoom-out;
	object-fit: contain;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100vw !important;
	height: 100vh !important;
	z-index: 999;
	padding: 1em;
	box-shadow: black 0 0 9999px;
	background-color: #000d;
}

button {
	border: none;
	background-color: #039be5;
	color: white;
	font-size: 1em;
	padding: 1em;
	cursor: pointer;
	margin: 1em 1em 1em 0;
}

button:hover {
	background-color: #111;
}

button:active {
	background-color: black;
	color: #ddd;
}

blockquote {
	border-left: #039be5 7px solid;
	margin: 1em 0 1em 0;
	padding: 0.5em 0 0.5em 1em;
}

.row::after {
	content: "";
	clear: both;
	display: table;
}
.row .col {box-sizing: border-box; float: left;}
.row .col.s1 {width: 8.33%;}
.row .col.s2 {width: 16.66%;}
.row .col.s3 {width: 25%;}
.row .col.s4 {width: 33.33%;}
.row .col.s5 {width: 41.66%;}
.row .col.s6 {width: 50%;}
.row .col.s7 {width: 58.33%;}
.row .col.s8 {width: 66.66%;}
.row .col.s9 {width: 75%;}
.row .col.s10 {width: 83.33%;}
.row .col.s11 {width: 91.66%;}
.row .col.s12 {width: 100%;}
.hide-on-s {display: none;}

@media screen and (min-width: 768px)  { /*medium*/
	.row .col.m1 {width: 8.33%;}
	.row .col.m2 {width: 16.66%;}
	.row .col.m3 {width: 25%;}
	.row .col.m4 {width: 33.33%;}
	.row .col.m5 {width: 41.66%;}
	.row .col.m6 {width: 50%;}
	.row .col.m7 {width: 58.33%;}
	.row .col.m8 {width: 66.66%;}
	.row .col.m9 {width: 75%;}
	.row .col.m10 {width: 83.33%;}
	.row .col.m11 {width: 91.66%;}
	.row .col.m12 {width: 100%;}
	.hide-on-m {display: none}
	.hide-on-s {display: block;}
}	
@media screen and (min-width: 1024px)  { /*large*/
	.row .col.l1 {width: 8.33%;}
	.row .col.l2 {width: 16.66%;}
	.row .col.l3 {width: 25%;}
	.row .col.l4 {width: 33.33%;}
	.row .col.l5 {width: 41.66%;}
	.row .col.l6 {width: 50%;}
	.row .col.l7 {width: 58.33%;}
	.row .col.l8 {width: 66.66%;}
	.row .col.l9 {width: 75%;}
	.row .col.l10 {width: 83.33%;}
	.row .col.l11 {width: 91.66%;}
	.row .col.l12 {width: 100%;}
	.hide-on-l {display: none}
}		
@media screen and (min-width: 1800px)  { /*xl*/
	.row .col.xl1 {width: 8.33%;}
	.row .col.xl2 {width: 16.66%;}
	.row .col.xl3 {width: 25%;}
	.row .col.xl4 {width: 33.33%;}
	.row .col.xl5 {width: 41.66%;}
	.row .col.xl6 {width: 50%;}
	.row .col.xl7 {width: 58.33%;}
	.row .col.xl8 {width: 66.66%;}
	.row .col.xl9 {width: 75%;}
	.row .col.xl10 {width: 83.33%;}
	.row .col.xl11 {width: 91.66%;}
	.row .col.xl12 {width: 100%;}
	.hide-on-xl {display: none}
}

/*Darkmode*/
@media (prefers-color-scheme: daasdfrk) {
	:root {
		color: white;
		background-color: #1d1e1f;
		color-scheme: dark;
	}
	.scrollToTopButton {
		background-color: #1d1e1f;
		color: white;
	}
	a {
		color: rgb(44, 184, 252)
	}
}