html {
	/* smooth scrolling to links on own page */
	scroll-behavior: smooth;
	/* adjust scrolling so that the header does not cover the section */
	scroll-padding-top: calc(var(--header-size) + 1rem);
}
a, .preview::after, .preview::before { transition: var(--transition-time); }
/* disable transition for .preview because otherwise the layout glitches when resized */
.preview { transition: 0.0s; }

::selection { background: var(--akzent-color); color: #fff; }

body {
	margin: 0;
	height: 100%;
	width: var(--center-width);
	margin: 0 auto;
	padding-top: var(--header-size);

	display: flex;
	flex-direction: row;
	column-gap: calc(2 * var(--small-gap) ); /* space between main and aside */
	row-gap: 0;

	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.align-center {
	text-align: center;
}
header {
	position: fixed; right: 0; left: 0; top: 0;
	z-index: 1;
}
.header-center, .header-wide {
	display: flex;
	justify-content: space-between;
}
.header-center {
	width: calc(var(--center-width) + 2 * var(--header-element-padding-sides));
	margin: 0 auto;
}
.header-wide { margin: 0 var(--header-element-padding-sides); }
main {
	flex: 1; /* take up any remaining space */
	margin-top: 1rem;
	margin-bottom: 15vh;
}
main.align-center {
	padding: 0;
}
aside {
	align-self: flex-start;
	margin-top: 1rem;
	width: var(--aside-width);
	padding: 0 var(--small-gap);
	text-align: left;
}
aside #lists-container { justify-content: left; }
aside section { margin: var(--small-gap) }

header h1 { margin: 0; }
header a { padding: var(--header-element-padding); }
nav > ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}
header { white-space: nowrap; } /* never wrap to avoid covering up the screen */

section {
	margin-top: var(--small-gap);
	margin-bottom: calc(2 * var(--small-gap));
}
section:last-child { margin-bottom: 1rem; }
#lists-container {
	margin: var(--small-gap) 0;
}
main article { width: var(--main-text-width); }
h2, h3 {
	padding: 0 0 0.3rem 0;
	margin: var(--small-gap) 0;
}
main section > video, main section > img, main section > a > img {
	max-width: var(--main-text-width);
	max-height: 400px;
	border-radius: var(--border-radius);
	margin-bottom: var(--small-gap);
}
header h1 { margin: 0; }
header a { padding: var(--header-element-padding) var(--header-element-padding-sides); }
header nav a { padding: var(--header-element-padding-small) var(--header-element-padding-sides); }
header nav a:has(li i) {
	font-size: var(--header-font-size-icon);
	padding: 0;
	margin: var(--header-element-padding-icon);
}
header nav a:last-child:has(li i) { margin-right: var(--header-element-padding-sides); }
header nav a:last-child:not:has(li i) { padding-right: var(--header-element-padding-sides); }

header { font-size: var(--header-font-size); }
header nav { font-size: var(--header-font-size-small); }
header { font-size: var(--header-font-size); }
h1 { font-size: inherit; font-weight: inherit; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.4rem; }
h2 { color: var(--akzent-color); }

/* gradient bottom line */
h2 {
	background-image: linear-gradient(
		to right,
		var(--akzent-color) 0%,
		rgba(0, 0, 0, 0) 100%
	);
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 100% var(--border-width);
}
.align-center h2 {
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 0%,
		var(--akzent-color) 50%,
		rgba(0, 0, 0, 0) 100%
	);
}
h3 {
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 100% var(--border-width);
}
h3 {
	background-image: linear-gradient(
		to right,
		var(--border-color) 0%,
		rgba(0, 0, 0, 0) 100%
	);
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 100% var(--border-width);
}
.align-center h3 {
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 0%,
		var(--border-color) 50%,
		rgba(0, 0, 0, 0) 100%
	);
}

/* pseudo element for the border of the preview */
.preview::after {
	content: "";
	width: 100%; height: 100%;
	position: absolute; top: 0; left: 0;
}
.preview, .preview *, .preview::after, aside, .preview::before {
	border-radius: var(--border-radius); /* round corners */
}
aside, .preview::after {
	border: var(--border-width) solid var(--border-color);
	box-sizing: border-box; /* ensures the border is inside the element */
}
.preview::before {
	content: "";
	width: 100%; height: 100%;
	position: absolute; top: 0; left: 0;
}
.preview:hover::before {
	background-color: var(--akzent-color-transparent);
	z-index: -1;
}
.preview:hover::after {
	border-color: var(--akzent-color);
}
.preview-img {
	object-fit: cover;
	background: var(--preview-fallback-background);
}
.preview-img.show-on-hover { background: none; }

.tag {
	display: inline-block; /* Make it inline but still block-like for padding */
	background-color: var(--akzent-color-transparent);
	color: var(--strong-font-color);
	padding: 0.15rem 0.65rem;
	margin: 0.1rem 0.1rem;
	border-radius: 1rem;
	border: solid 1px var(--akzent-color);
	font-size: 0.9rem;
}
.tag:first-of-type { margin-left: 0; }
.tag:last-of-type { margin-right: 0; }

/* colors */
body {
	color: var(--default-font-color);
	background-color: var(--default-background-color);
}
header {
	background-color: var(--header-background-color);
	color: var(--header-font-color);
}

strong, h3, a { color: var(--strong-font-color); }
/* use header font color, except if specified otherwise, e.g. with a:hover */
header * { color: inherit; }
header a { text-decoration: none; } /* no underline in header*/
a:hover { color: var(--akzent-color); }
/* a:link { color: inherit; } */
/* a:visited { color: inherit; } */

.preview-container {
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--preview-row-gap);
	column-gap: var(--preview-column-gap);
}
.align-center .preview-container {
	justify-content: center;
}

.preview {
	width: min(var(--preview-width), var(--preview-opt-width));
	height: var(--preview-height);
	position: relative;
	text-align: center;

	/* color that is visible, if the image does not load */
	background-color: #0000;
}

/* exactly 1 preview element */
.preview:only-child {
	--number-of-previews: 1;
}
/* exactly 2 preview elements */
.preview-container:has(> .preview:nth-child(2):last-child) {
	--number-of-previews: 2;
}
/* exactly 3 preview elements */
.preview-container:has(> .preview:nth-child(3):last-child) {
	--number-of-previews: 3;
}
/* more than 3 preview elements cases */
.preview-container {
	--number-of-previews: 100;
}
.preview {
	--actual-previews-per-row: min(var(--number-of-previews), var(--max-previews-per-row));
	/* the added 0.0001 prevents a bug on firefox when zoomed in */
	--preview-width: calc((var(--main-width) - (var(--preview-column-gap) * (var(--actual-previews-per-row) - 1))) / (var(--actual-previews-per-row) + 0.0001));
}
#professional-projects .preview-container {
	--preview-opt-width: 360px;
	--preview-height: 230px;
}

.preview-title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 2em);
	
	background: none !important;
	font-size: 1.5rem;
	color: var(--preview-font-color) !important;
	text-shadow: var(--preview-text-shadow) !important;

	margin: 0;
}

.preview-img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.preview:has(.info) {
	height: auto;
	
	text-align: left;
	color: var(--default-font-color) !important;
	text-decoration: none;
}
.preview:has(.info) > .preview-img {
	height: var(--preview-height);

	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.preview > .info {
	padding-top: var(--preview-height);
	padding-bottom: 0.7rem;
	margin: 0rem 1.5rem;
}

.preview > .info > h3 {
	font-size: 1.25rem;
	background: none !important;
	padding: 0;
	margin: 0.5rem 0;
}

.preview > .info > p {
	margin: 0.5rem 0;
}

.show-on-hover { opacity: 0; }
.preview:hover .show-on-hover { opacity: 1; }
.show-on-hover { transition: 0.5s; }

#lists-container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--small-gap);

	text-align: left;
}

#lists-container > * {
	/* ensures that the width is adjusted for different screen sizes */
	max-width: calc((100vw - 300px) / 3);
	min-width: 11em;
}

#lists-container h3 {
	margin: 0;

	font-size: 1.0em;
}

#lists-container ul {
	margin-top: 0.5em;
	margin-bottom: 0;
	padding-left: 1.5em;

	font-size: 1.0em;
}

button {
	padding: 20px;
	margin: 10px;

	border-radius: 4px;
	border: none;

	cursor: inherit;

	font-size: 1.2rem;
}

.links p { margin: 0.5em 0; }

:root {
	--header-element-padding-sides: 1.0rem;
	--header-height: 3.5rem;

	--header-font-size: 1.2rem;
	--header-element-padding: calc((var(--header-height) - var(--header-font-size)) * 0.5);

	--header-font-size-small: 1.0rem;
	--header-element-padding-small: calc((var(--header-height) - var(--header-font-size-small)) * 0.5);

	--header-font-size-icon: 1.4rem;
	--header-element-padding-icon: calc((var(--header-height) - var(--header-font-size-icon)) * 0.5) 0.7rem;
	/* the font is taking up 1.2 times the space of the font size (I think it is not font dependent) */
	--header-size: calc(var(--header-font-size) * 1.2 + var(--header-element-padding) * 2);
}

/* rescaling */
body {
	--aside-width: 0px;
	--aside-and-gap-width: 0px;
	--main-text-width: 100%;
}
body:has(aside) {
	--aside-width: 300px;
	--aside-and-gap-width: calc( 300px + 2 * var(--small-gap) );
}
body {
	--center-max-width: 1250px;
	--small-gap: 1rem;
	--border-radius: 7px;
	--border-width: 2px;

	--center-width: min(calc(100vw - 4 * var(--small-gap)), var(--center-max-width));
	--main-width: calc( var(--center-width) - var(--aside-and-gap-width) );

	--preview-column-gap: var(--small-gap);
	--preview-row-gap: var(--small-gap);

	--max-previews-per-row: 3;

	/* if space allows, expand until this width */
	--preview-opt-width: 330px;
	--preview-height: 200px;

	--transition-time: 0.15s;
}
@media only screen and (max-width: 1050px) {
	body:has(aside) {
		--aside-width: 250px;
		--aside-and-gap-width: calc( 250px + 2 * var(--small-gap) );
	}
}
@media only screen and (max-width: 1000px) {
	body:has(aside) { --max-previews-per-row: 2; }
}
@media only screen and (max-width: 750px) {
	body { --max-previews-per-row: 2; }
	body:has(aside) { --max-previews-per-row: 1; }
}

/* mobile layout */
@media only screen and (max-width: 750px) {
	body { flex-direction: column; }
	body, body:has(aside) {
		--center-width: 90vw;
		--main-text-width: var(--center-width);
		--aside-width: var(--center-width);
		--aside-and-gap-width: 0px;

		--max-previews-per-row: 2;
	}
	main { padding: 0; }

	/* remove navigation elements */
	nav a {
		display: none;
	}
	/* except for elements with this class */
	nav a.dont-hide {
		display: inherit;
	}
}

@media only screen and (max-width: 500px) {
	body, body:has(aside) { --max-previews-per-row: 1; };
}

/* color scheme */
:root {
	--default-font-color: #303030;
	--default-background-color: #fff;

	--header-background-color: #25292e;
	--header-font-color: #fff;

	--akzent-color: #ee664a;
	--akzent-color-transparent: #ee654a2c;

	--strong-font-color: #000;

	--border-color: #a3a3a3;

	--preview-font-color: #ffffff;
	--preview-text-shadow:
		0 0 0.3em #000b, 0 0 0.7em #000b, 0 0 1.1em #000b, 0 0 1.5em #000b,
		0 0 1.9em #000b, 0 0 1.9em #000b, 0 0 1.9em #000b;
	--preview-fallback-background: linear-gradient(
		to right,
		rgb(39, 53, 70) 0%,
		#0d1117 100%
	);
}

@media (prefers-color-scheme: dark) {
	:root {
		--default-font-color: #d1d1d1;
		--default-background-color: #0d1117;

		--border-color: #3d444d;

		--strong-font-color: #fff;
	}
}