.wlyc7hrsx{display:block}
/*home page*/
	.fixed-bg {
		position: fixed;
		top: 0;
		left: 50%;
		--shift: 0px;
		transform: translatex(calc(-50% + var(--shift)));
		aspect-ratio: 1800/1200;
		height: 100vh;
		height: 100lvh;
		min-width: 100%;
	}

	.fixed-bg img {
		position: absolute;
		inset: 0;
		height: 100%;
		min-width: 100%;
		width: auto;
		object-fit: cover;
		object-position: bottom center;
	}

	.fixed-bg svg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		display: block;
	}

	/*background overlay*/
	#bg-overlay {
		opacity: 0;
		filter: blur(0px);
		transition: opacity 0.3s, filter 0.3s;
	}
	#bg-overlay.blurred {
		filter: blur(2px);
	}

	#bg-overlay text {
		font-size: 30px;
		fill: white;
		font-weight: 600;
		transform: translate(-5px, 22px);
	}

	#bg-overlay.bg-vis-active {
		opacity: 1;
	}

	#bg-overlay g {
		cursor: pointer;
	}

	#bg-overlay rect {
		fill: hsla(0, 0%, 100%, 0);
		stroke-width: 2;
		stroke: white;
	}
	#bg-overlay > *:hover rect {
		fill: hsla(0, 0%, 100%, 0.2);
		stroke-width: 3;
	}

	/* bg nav buttons */
	.bg-nav {
		appearance: none;
		background-color: transparent;
		border: none;
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		display: none;
		width: 3rem;
		transition: transform 0.1s;
	}
	.bg-nav.hidden,
	.bg-nav.bg-vis-active.hidden {
		display: none;
	}
	.bg-nav.right img {
		transform: scaleX(-100%);
	}

	.bg-nav.left {
		left: 0;
	}
	.bg-nav.right {
		right: 0;
	}
	.bg-nav.left:hover {
		transform: translateY(-50%) translateX(-0.5rem);
	}
	.bg-nav.right:hover {
		transform: translateY(-50%) translateX(0.5rem);
	}
	@media (max-aspect-ratio: 1.03) {
		.bg-nav.bg-vis-active {
			display: block;
		}
	}

	/* row popup */

	.row-popup {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 2;
		grid-template-columns: minmax(10px, 1fr);
		grid-template-rows: 2rem 1fr;
		row-gap: 2rem;
		align-items: center;
		justify-items: center;
		padding: 2rem;
		overflow-y: scroll;
		overscroll-behavior: contain;
	}
	.row-popup .number {
		display: block;
		grid-row: 1;
		grid-column: 1;
		justify-self: flex-start;
		color: white;
		font-weight: 700;
		font-size: 3rem;
	}
	.row-popup button {
		appearance: none;
		background-color: transparent;
		border: none;
		display: block;
		grid-row: 1;
		grid-column: 1;
		justify-self: flex-end;
		width: 2.5rem;
		transform: scale(1);
		transition: transform 0.1s;
	}

	.row-popup button:hover {
		transform: scale(1.1);
	}

	.row-popup ul {
		grid-row: 2;
		grid-column: 1;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		gap: 2rem;
		margin: 0;
		padding: 0;
		list-style-type: none;
		width: 100%;
	}
	.row-popup ul li {
		width: 100%;
		max-width: 24rem;
	}

	.row-popup ul li a {
		color: white;
		border: 3px solid white;
		font-size: 2rem;
		hyphens: auto;
		line-height: 1.2;
		font-weight: 600;
		text-decoration: none;
		display: block;
		aspect-ratio: 16/9;
		padding: 1rem;
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
	}

	@media (min-width: 370px) {
		.row-popup ul li a {
			font-size: 2.5rem;
		}
	}

	@media (min-width: 28rem) {
		.row-popup ul li a {
			font-size: 3rem;
		}
	}

	.row-popup ul li a:hover {
		background-color: hsla(0, 0%, 100%, 0.2);
	}

	.row-popup.open {
		display: grid;
	}

	/* language switcher */
	nav {
		position: fixed;
		top: 0;
		left: 50%;
		width: 100%;
		max-width: 1300px;
		transform: translateX(-50%);
		z-index: 1;
		height: 2rem;
		line-height: 2rem;
		padding: 0 2rem;

		display: flex;
		justify-content: flex-end;
		pointer-events: none;
		z-index: 3;
	}
	nav.hidden {
		display: none;
	}
	nav a {
		text-decoration: none;
		pointer-events: all;
	}
	nav a:hover {
		text-decoration: underline;
	}

	nav .homelink {
		font-weight: 500;
	}

	nav .homelink::before {
		content: "< ";
	}

	.lang-switcher .current-lang {
		font-weight: 500;
	}

	/*home page content*/
	main {
		position: relative;
		z-index: 1;
		pointer-events: none;
	}
	main.hidden {
		opacity: 0;
	}
	main > * {
		pointer-events: all;
	}

	.home-top {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			"title"
			"arrow";
		max-width: 1300px;
		margin: 0 auto;
	}
	@media (min-width: 820px) {
		.home-top {
			grid-template-columns: 1fr 4rem 1fr;
			grid-template-rows: minmax(auto, 50vh) minmax(auto, 50vh);
			grid-template-areas:
				"title . program"
				"title arrow logos";
		}
	}
	h1 {
		grid-area: title;
		margin: 0;
		display: grid;
		grid-template-rows: minmax(10px, 1fr) minmax(10px, 1fr);
		padding-block: 2rem;
		min-height: 60vh;
		max-height: 100vh;
		gap: 4rem;
	}
	h1 img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	.img-top {
		object-position: top left;
	}
	.img-bottom {
		object-position: bottom left;
	}
	.down-arrow {
		grid-area: arrow;
		align-self: flex-end;
		justify-self: center;
		display: block;
		width: 2.5rem;
		transform: rotate(-90deg);
		transition: transform 0.1s;
	}
	.down-arrow:hover {
		transform: rotate(-90deg) translateX(-0.5rem);
	}

	.intro-text {
		padding: 1rem;
		font-size: 1rem;
		grid-area: program;
		align-self: flex-start;
		margin-inline: auto;
		max-width: 60ch;
		position: relative;
		color: white;
		margin-top: 2rem;
	}
	.intro-text::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: hsla(0, 0%, 0%, 0.1);
		backdrop-filter: blur(5px);
		filter: blur(15px);
		-webkit-backdrop-filter: blur(5px);
		-webkit-filter: blur(15px);
	}

	.intro-text p {
		margin: 0;
	}

	scroll-point#overview {
		height: 100vh;
		position: relative;
		z-index: -1;
		pointer-events: none;
	}

	section.footer {
		background-color: white;
		margin-inline: auto;
		max-width: 1300px;
		padding: 2rem;
		font-size: 0.8rem;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto 1fr auto;
		grid-template-areas:
			" title title "
			"students tutors "
			"students observatorium "
			"logos logos ";
		row-gap: 1rem;
		column-gap: 1rem;
		align-items: flex-start;
		flex-direction: column;
		width: fit-content;
		margin-bottom: 2rem;
	}

	@media (min-width: 980px) {
		section.footer {
			grid-template-columns: auto auto 1fr 1fr;
			grid-template-rows: auto auto 1fr;
			grid-template-areas:
				"title title title title"
				"students tutors . logos"
				"students observatorium . logos";
			column-gap: 2rem;
		}
	}

	section.footer > strong {
		grid-area: title;
		text-transform: uppercase;
		display: block;
		width: 100%;
	}
	section.footer ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	.students {
		grid-area: students;
	}

	.tutors {
		grid-area: tutors;
	}
	.observatorium {
		grid-area: observatorium;
	}

	section.footer .logos {
		grid-area: logos;
		width: 100%;
		max-width: 28rem;
		place-self: flex-end end;
		opacity: 0.9;
	}
/* montserrat-200 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 200;
	src: url("/fonts/montserrat-v25-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-200italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 200;
	src: url("/fonts/montserrat-v25-latin-200italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-300 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 300;
	src: url("/fonts/montserrat-v25-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-300italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 300;
	src: url("/fonts/montserrat-v25-latin-300italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400;
	src: url("/fonts/montserrat-v25-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 400;
	src: url("/fonts/montserrat-v25-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 500;
	src: url("/fonts/montserrat-v25-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 500;
	src: url("/fonts/montserrat-v25-latin-500italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-600 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 600;
	src: url("/fonts/montserrat-v25-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-600italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 600;
	src: url("/fonts/montserrat-v25-latin-600italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 700;
	src: url("/fonts/montserrat-v25-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-700italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 700;
	src: url("/fonts/montserrat-v25-latin-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

* {
	box-sizing: border-box;
}

html:focus-within {
	scroll-behavior: smooth;
}

:root {
	font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	line-height: 1.4;
}
body {
	margin: 0;
	padding: 0;
	width: 100%;
}

a {
	color: inherit;
}

img,
svg {
	display: block;
	width: 100%;
	height: auto;
}

/* UTILITIES */