:root {
	--wbg: white;
	--wfg: black;
	--fonx: "Averia Serif Libre", serif;
	--background: var(--wbg);
	--foreground: var(--wfg);
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: var(--wfg);
		--foreground: var(--wbg);
	}

	a:visited {
		color: fuchsia;
	}

	a {
		color: cornflowerblue;
	}
}

:root {
	font-size: 4.0vw;
	box-sizing: border-box;
	background-color: var(--background);
	color: var(--foreground);
	font-family: var(--fonx);
}

body {
	margin: 0;
}

.section {
	padding-top: 4%;
	padding-bottom: 4%;
	padding-left: 8%;
	display: flex;
	/* flex: 2 1 auto; */
	aspect-ratio: 16 / 5;
	background-repeat: no-repeat;
	background-size: 100%;
}

p,
/* a, */
h2,
h3,
li {
	background-color: var(--background);
	height: fit-content;
	width: fit-content;
}

h2 {
	margin: 0;
	/* padding-top: 4%; */
	font-size: 1.5rem;
	/* padding-bottom: 4%; */
}

.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* .box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
} */

.logo {
	/* padding-top: 4%; */
	width: 100%;
	display: block;
	justify-content: center;
	align-items: flex-end;
	/* height: 400%; */
	padding-left: 0;
	background-color: #0b5170;
	background-image: url("../assets/bg-imgs/nyuszik.webp");
}

.logo img {
	padding-top: 15%;
	width: 50%;
}

.where {
	padding-left: 4%;
	padding-right: 4%;
	justify-content: space-evenly;
	align-items: center;
	background-color: #ceb53b;
	background-image: url("../assets/bg-imgs/apokalyps.webp");
}

.where #text {
	display: flex;
	flex-direction: column;
}

.when {
	flex-direction: column;
	background-color: #cb10d4;
	background-image: url("../assets/bg-imgs/dinosaurgrr.webp");
}

.when p {
	margin-left: 8%;
}

.how {
	flex-direction: column;
	background-color: #f810b7;
	background-image: url("../assets/bg-imgs/nyamikonyv.webp");
}

.how #apply {
	padding-left: 4%;
	/* display: flex; */
	/* flex-direction: column; */
	/* justify-content: space-around; */
}

.tncs {
	padding-right: 8%;
	padding-left: 7%;
	padding-bottom: 2%;
	font-size: 0.72rem;
	flex-direction: column;
	background-color: #dbdcca;
	background-image: url("../assets/bg-imgs/szentirma.webp");
}

.tncs #ethos {
	font-size: 0.6rem;
	font-style: italic;
	margin-top: -2%;
}

ol {
	counter-reset: item;
	padding-inline-start: 4%;
}

ol li {
	display: block;
	margin-bottom: 2%;
}

ol li:before {
	content: counter(item) ". ";
	counter-increment: item;
	/* color: red; */
}

.about {
	flex-direction: column;
	/* padding-left: 0; */
	padding-top: 4%;
	padding-bottom: 2%;
	aspect-ratio: auto;
	/* align-items: center; */
	align-items: flex-start;
	justify-content: space-between;
	background-color: #42cd6a;
	background-image: url("../assets/bg-imgs/vacsi.webp");
}

.bober {
	display: flex;
	justify-content: space-between;
	padding: 0;
	margin: 0;
	width: 90%;
	align-items: start;
	/* flex-direction: column; */
}

video {
	/* width: 68%; */
	width: 45%;
	aspect-ratio: 16/9;
	/* margin-right: 8%; */
	margin-left: auto;
	border-radius: 0.2rem;
	border: 0.3vw solid var(--wfg);
}

#pathos {
	width: 90%;
	font-size: 0.9rem;
	margin-top: 8%;
}

.where #osm-map {
	width: 60%;
	aspect-ratio: 16/9;
	border-radius: 0.2rem;
	border: 0.3vw solid var(--wfg);
}

.leaflet-control-attribution {
  font-family: var(--fonx); /* has to be overriden */
  font-size: 0.3rem;
}

.disclaimer {
	padding-left: 4%;
}

.disclaimer p,
.disclaimer strong {
	font-size: 0.7rem;
	/* margin-bottom: 1.7rem; */
}

.sponsors h2 {
	margin-left: 8%;
}

.sponsors p {
	font-size: 3vw;
	margin-left: 8%;
	margin-top: 1%;
	margin-bottom: -4%;
}

.sponsors {
	flex-direction: column;
	padding-left: 0;
	background-color: #ae974d;
	background-image: url("../assets/bg-imgs/rhino.webp");
	height: 32vw;
	aspect-ratio: auto;
}

.sponsors #logos {
	padding-top: 8%;
	height: 34%;
}

.sponsors #logos #brompton,
.sponsors #logos #chain {
	background-color: white;
}

.sponsors a {
	/* yessir! */
	text-decoration: none;
}

.sponsors img {
	border-radius: 2vw;
	border: 0.3vw solid var(--wfg);
	height: 100%;
}

footer {
	background-color: #4cc2e2;
	background-image: url("../assets/bg-imgs/theravisier.webp");
	background-repeat: no-repeat;
	background-size: 100%;
	padding-top: 2%;
	padding-bottom: 2%;
	aspect-ratio: 16 / 2.4;
	font-size: 0.7rem;
	text-align: center;
}

footer #jmail {
	background-color: blueviolet;
	border-radius: 0.1rem;
	font-size: 0.6rem;
}

.stack-container h2 {
	margin-left: 8%;
}

.stack-container {
	background-color: #4cc2e2;
	background-image: url('../assets/bg-imgs/angyal.webp');
	flex-direction: column;
	width: 100%;
	padding-left: 0;
	height: 70vw;
}

.image-stack {
	position: relative;
	width: 50%;
	height: 72%;
	/* for overall stack movement */
	transition: transform 0.5s ease-out;
}

.image-stack img {
	position: absolute;
	top: 12%;
	left: 44%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0.2rem;
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
	cursor: grab;
	/* indicate being draggable */
	user-select: none;
	/* prevent text selection during drag */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	border: 0.3vw solid var(--wfg);

	/* ease-in-out */
	transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), z-index 0.04s linear;
}

.image-stack img.swiping {
	/* disable transitions during active drag */
	transition: none;
}

.fullscreen-overlay {
	/* hidden by default */
	visibility: hidden;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* above all other content */
	z-index: 10000;
	/* centered */
	justify-content: center;
	align-items: center;
	/* fancy effects */
	filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.5));
	backdrop-filter: blur(20px);
	/* safari-kurve */
	-webkit-backdrop-filter: blur(20px);
}

.fullscreen-overlay.active {
	/* do show when active */
	visibility: visible;
}

.fullscreen-overlay img {
	max-width: 94%;
	max-height: 94%;
	/* ensure full image is visible */
	object-fit: contain;
	/* override any stack transforms */
	transform: none;
	border: 0.3vw solid var(--wfg);
	border-radius: 0.2rem;
	box-shadow: none;
	/* indicate it can be closed */
	cursor: zoom-out;
}