@font-face {
	font-family: 'robotoregular';
	src:	url('fonts/Roboto-Regular-webfont.woff')	format('woff'),
		url('fonts/Roboto-Regular-webfont.ttf')		format('truetype');
	font-weight:	normal;
	font-style:	normal;
}


* {
	box-sizing: border-box;	/* Include padding in width calculation */
	margin:	0;
	padding: 0;
}

body {
	font-family: 'robotoregular', Arial, sans-serif;
	background-color: white;
	color: black;
	letter-spacing: 0.1px;
	word-spacing: 4px;
}

.container {

	max-width: 1400px;
	margin: 0 auto;		/* Center the container horizontally */

	padding: 20px 40px;
}

.title-bar {

	position: fixed;	/* Keeps the header fixed */

	/* top: 0; */
	left: 50%;		/* Start from the middle of the screen */
	transform: translateX(-50%);	/* Center it horizontally */

	max-width: 1400px;	/* FIXME: Why not passed from parent, here? */
	width: 100%;
	padding: 20px 40px;

	background-color: rgba(255, 255, 255, 0.85);
	color: black;

	backdrop-filter: blur(4px);

	display: flex;
	justify-content: space-between;
	align-items: center;

	z-index: 1000;
}

.title-bar::before {	/* Pseudo Element to create distance to top of screen */
	content: '';

	position: absolute;

	top: -20px; /* Adjust to extend above the legend */
	left: 0;
	right: 0;
	height: 20px; /* Height of the padded area */

	background-color: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(4px);

	z-index: -1; /* Place behind the legend */
}

.title {

	font-size: 32px;

}

#logo {

	float: left;
	height: 40px;
	width: auto;
	padding-right: 20px;
}

.title-bar a {

	text-decoration: none;
}

.title-bar a:link {

	color: black;

}

.title-bar  a:visited {

	color: black;
}

/* ******************************** 
	Main Legend Styling
******************************** */

.menu-container {

	position: relative;
	display: flex;
	align-items: center;
}

.legend {

	display: flex;
	justify-content: flex-end;	/* Align to the right */
	gap: 20px;			/* Space between links */
}

.legend a {

	color: black;
	text-decoration: none;

	margin-left: 20px;
}

.legend a:hover {

	text-decoration: underline;
}

.legend a.active {
	text-decoration: underline; /* Underline the active link */
}

.menu-button {

	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	display: none;	/* Initially hidden */
}

.legend.show {		/* Dropdown Styling */

	flex-direction: column;
	position: absolute;

	background-color: white;

	right: 0;
	padding: 10px;
	top: 40px; /* Position below the button */

	z-index: 1000;
}

/* ******************************** 
	Sub-Legend Styling
******************************** */

.sub-legend {

	display: flex;
	justify-content: flex-start;	/* Align to the left */
	gap: 20px;			/* Space between links */
}

.sub-legend a {

	color: black;
	text-decoration: none;
	margin-top: 5px;
}

.sub-legend a:hover {

	text-decoration: underline;
}

.sub-legend a.active {
	text-decoration: underline; /* Underline the active link */
}

/* ******************************** 
	Main content Styling
******************************** */


.main-content {

	padding-top: 120px; /* Adjusted for title bar height */
}

.main-content h1 {

	padding-bottom: 10px; /* Adjusted for title bar height */
}

.main-content h3 {

	padding-top: 20px; /* Adjusted for title bar height */
}

.main-content .block-text {
	text-align: justify
}

/* Unify these segments */
div.figure-right {

	float: right;
	width: 60%;
	text-align: center;
	font-style: italic;
	font-size: smaller;
	padding: 20px;

	min-width: 320px;
}

div.figure-right-70 {

	float: right;
	width: 70%;
	text-align: center;
	font-style: italic;
	font-size: smaller;
	padding: 20px;

	min-width: 320px;
}


div.figure-right-40 {

	float: right;
	width: 40%;
	text-align: center;
	font-style: italic;
	font-size: smaller;
	padding: 20px;

	min-width: 320px;
}

div.figure-right-25 {

	float: right;
	width: 25%;
	text-align: center;
	font-style: italic;
	font-size: smaller;
	padding: 20px;

	min-width: 320px;
}

div.figure-profile {

	float: right;
	width: 25%;
	min-width: 320px;
}

div.figure-left {

	float: left;
	width: 40%;
	text-align: center;
	font-style: italic;
	font-size: smaller;
	padding: 20px;

	min-width: 320px;
}

div.figure-left-20 {

	float: left;
	width: 20%;
	text-align: center;
	font-style: italic;
	font-size: smaller;
	padding: 20px;

	min-width: 320px;
}

div.figure-left-60 {

	float: left;
	width: 60%;
	text-align: center;
	font-style: italic;
	font-size: smaller;
	padding: 20px;

	min-width: 320px;
}


/* Sections */

.section {

	font-size: 36px;
}

.section a {

	text-decoration: none;
}

.section a:link {

	color: black;

}

.section  a:visited {

	color: black;
}

.subsection {

	font-size: 18px;
	padding-top: 20px;
}

.subsection.title {

	font-size: 30px;
}

.subsection ul, .subsection ol {

	padding-left: 30px;
	padding-bottom: 20px;
}

.subsection li {
	padding-top: 20px;
}

/* Grid Elements */

.grid {

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));

	gap: 20px;

	padding: 20px;
}

.grid-item {

	position: relative;		/* Position relative for absolute positioning of overlay */
	overflow: hidden;		/* Ensure content does not overflow */
	transition: background-color 0.1s ease; /* Smooth transition for hover effects */

	background-color: white;
	border: 2px solid #eee;
	border-radius: 5px;
	text-align: center;
}

.grid-item a {

	text-decoration: none;
}

.grid-item img {

	width: 100%;
	height: 100%;

	object-fit: cover;	/* Cover the area while maintaining aspect ratio */
	transition: filter 0.1s ease; /* Smooth transition for filter effect */
}

.overlay-text {

	position: absolute;
	bottom: 2px;		/* Space from the bottom */
	left: 2px;		/* Space from the left */

	background-color: rgba(0, 0, 0, 0);
	color: black;


	font-size: 21px;
	padding: 0px 2px;

	transition: color 0.1s ease;	/* Smooth transition for text color */

	max-height: 30%;		/* Limit height to avoid exceeding bottom */
	overflow: hidden;		/* Hide overflow text */
	white-space: nowrap;		/* Prevent text wrapping */
	text-overflow: ellipsis;	/* Add ellipsis if text is too long */
}

.transition-text {

	position: absolute;	/* Position the link absolutely */
	top: 50%;		/* Center vertically */
	left: 50%;		/* Center horizontally */

	transform: translate(-50%, -50%); /* Center the element */

	opacity: 0; /* Initially hidden */

	transition: opacity 0.1s ease; /* Smooth transition for visibility */

	color: white; /* Color */

	font-size: 24px;
}

.transition-text a {

	text-decoration: none; /* Remove underline */
}

/* Hover Effects */
.grid-item:hover {

	border-color: white;
}

.grid-item:hover img {

	filter: brightness(0); /* Makes the image black */
}

.grid-item:hover .overlay-text {

	color: white; /* Change text color on hover */
}

.grid-item:hover .transition-text {

	opacity: 1; /* Show the link on hover */
}

/* Tables */

.table-open-science {

	padding-top: 20px;
	padding-bottom: 20px;

	font-size: 14px;
}

.table-open-science .title {

	font-size: 18px;
	font-weight: bold;
}

.table-open-science td, .table-open-science th {

	border-radius: 5px;
	padding: 1px 4px;
}

.table-open-science tr:nth-child(even) {

	background-color: #f2f2f2;
}

.table-open-science tr:hover {

	background-color: #ddd;
}

.table-open-science th {

	padding: 1px 4px;
	text-align: left;
	background-color: #b8b8b8;
	color: white;
}


.table-projects {

	padding-top: 20px;
	padding-bottom: 60px;
}

.table-projects td {

	padding-top: 10px;
	padding-right: 8px;
}

.contact-table {

	padding-top: 20px;
	padding-bottom: 20px;

	font-size: 20px;
}

.contact-table td, .contact-table th {

	padding: 5px 5px;
}


/* ******************************** 
	Footer Styling
******************************** */

.footer {

	padding-top: 60px;
	font-size: 18px;
}

/* ******************************** 
    Media query for small screens
******************************** */

@media (max-width: 768px) {

	.menu-button {
		display: block; /* Show button on small screens */
	}

	.legend {
		display: none; /* Hide legend by default */
	}

	.legend.show {
		display: flex; /* Show when the button is clicked */
	}
	.grid {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	}
}

/* Media query for larger screens */
@media (min-width: 769px) {

	.menu-button {
		display: none; /* Hide button on larger screens */
	}

	.legend {
		display: flex; /* Show legend links */
		justify-content: flex-end; /* Align to the right */
	}
}