/* Global box-sizing fix for proper width calculations */
*, *::before, *::after {
	box-sizing: border-box;
}

html, body {
	overflow-x: hidden;
	max-width: 100%;
}

/* --------------------------------------------------------------------------- DESKTOP VIEW ----------------------------------------------------------*/
@media screen and (max-width: 9999px){



/* -------------------------     General   ------------------------*/
.backgroundcolor {
	background-color: #fafaf8
}

/* -------------------------  MENU   ------------------------*/

.webhead {
	margin: auto;
	width: 70%;
	padding: 12px 5px;
	background-color: #f0f0f0;
	border-bottom: 2px solid #e0e0e0;
	box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

#menu {
	background-color: transparent;
	padding: 0px;
	margin: 0;
	overflow: hidden;
}

label {
	font-size: 30px;
	cursor: pointer;
	display: none;
}

#btn-menu {
	display: none;
}

#menu ul { /* Menu's first level */
	background-color: transparent;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Nav links wrapper with subtle background */
#menu .nav-links {
	display: flex;
	align-items: center;
	background-color: rgba(0,0,0,0.04);
	padding: 8px 16px;
	border-radius: 6px;
}

#menu ul ul{ /* Menu's second level */
	display: none;
	text-align: left;
	padding: 0px;
	margin: 0px;
}

#menu ul ul a {
	padding: 8px 10px 3px 10px;
}


#menu #name  { /*  Formating my name*/
	margin: 0px;
	padding: 5px 0px 8px 0px;
	flex-grow: 1;
}

#menu .mylink  { /*  Formating other elements of the first level*/
	padding: 8px 0px 3px 0px;
	margin: 0px 0px 0px 0px;
}

/* Nav separator dots */
#menu .nav-separator {
	color: #999;
	padding: 0 12px;
	font-weight: normal;
}

#menu  a {
	display: block;
	color: #1a1a2e;
	text-decoration: none;
	text-align: left;
	font-weight: normal;
	font-family: 'Headland One', serif;
	font-size: 1.10em;
	position: relative;
	transition: color 0.2s ease;
}

#menu #name a {
	display: inline-block;
	color: #1a1a2e;
	text-decoration: none;
	font-weight: bold;
	font-family: 'Headland One', serif;
	font-size: 1.35em;
	letter-spacing: 0.02em;
	border-bottom: 3px solid #4ecdc4;
	padding-bottom: 4px;
}

#menu .mylink a {
	display: block;
	color: #1a1a2e;
	text-decoration: none;
	font-weight: 600;
	font-family: 'Headland One', serif;
	font-size: 1.05em;
	padding: 6px 12px;
}

#menu #name a.active  {
	color: #1a1a2e;
}

#menu .mylink a.active  {
	color: #0d6e6e;
	font-weight: 600;
}

#menu a span {
	font-size: 0.9em;
	margin: -0.4em
}

#menu ul li:hover + .dropdown-content, #menu .dropdown-content:hover   {
	display:block;
	position: absolute;
	background-color: #ffffff;
	border: 1px solid #e0e0e0;
	min-width: 100px;
	z-index: 1;
	text-align: left;
	margin: 30px 0px 0px 500px;
}


/* animation underlining for nav links */
#menu .mylink a:before {
	content: "";
	position: absolute;
	margin: 0px 0px 0px 0px;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #4ecdc4;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

#menu .mylink a:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}

#menu .mylink a:hover {
	color: #0d6e6e;
}


/*-----------------------    Content   ------------------------*/

.page-header {
	font-family: 'Vollkorn', serif;
	font-size: 1.20em
}

.webcontent {
	margin: auto;
	width: 70%;
	padding: 40px 50px;
	background-color: #ffffff;
	color: #262626;
	font-family: 'Vollkorn', serif;
	font-size: 1.1em;
	line-height: 1.65;
}

.webcontent a {
	color: #0d6e6e;
	text-decoration: none;
	transition: all 0.2s ease;
}

.webcontent a:hover {
	color: #0a5555;
	text-decoration: underline;
}

.text p {
	  text-align: justify;
}

table, th, td {
    border: 1px solid black;
}

.phdapplication_box {

}

#profile {
	float:left;
	display: inline;
	width: 40%;
	padding: 0px 10px 5px 1px

}

#header_research {

}

.conferences {
	font-size: 0.85em;
	color: #444;
	margin-top: 4px;
}

/* Award styling */
.award {
	font-size: 0.85em;
	color: #1a1a2e;
	margin-top: 4px;
}

ol {
    list-style-type: decimal;
}

ol li {
    margin-bottom: 24px;
}

ol li::marker {
    font-family: "Georgia", serif; /* Font for the numbering */
    font-size: 1.0em; /* Optional for emphasis */
}

ul li {
    margin-bottom: 20px;
}

.numbered {
    list-style-type: none; /* Remove the default bullet */
    counter-reset: list-counter; /* Initialize the counter at the start */
}

.numbered li {
    counter-increment: list-counter; /* Increment the counter for each list item */
}

.numbered li::before {
    content: counter(list-counter) ". "; /* Insert the counter value before each item */
}

.page-header-online {
    display: none;
}

/*--- Img profile ---*/
.img_profile {
	display: flex;
	flex-direction: row; /* Align items in a row by default for desktop */
	align-items: flex-start;
	gap: 30px; /* Space between the image and text content */
}

.profile-text img {
	max-width: 200px;
	border-radius: 4px;
}

.profile-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	flex-shrink: 0;
}

.profile-content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	font-size: 1em;
	margin-top: 0.5em;
}

/* Profile name styling */
.profile-name {
	font-family: 'Vollkorn', serif;
	font-size: 1.6em;
	font-weight: 600;
	color: #1a1a2e;
	margin-bottom: 0.3em;
	border-bottom: 3px solid #4ecdc4;
	display: inline-block;
	padding-bottom: 4px;
}

.profile-title {
	font-size: 1.05em;
	color: #444;
	margin-bottom: 0.2em;
}

.profile-institution {
	font-size: 1em;
	color: #666;
	margin-bottom: 0.3em;
}

.profile-education {
	font-size: 0.95em;
	color: #666;
	margin-bottom: 1em;
}

.institution-logo {
	display: none; /* Hidden - logos now in profile-logos container */
}

.profile-links {
	margin-bottom: 1em;
}

.profile-links a {
	margin-right: 8px;
}

.profile-bio {
	border-top: 1px solid #e0e0e0;
	padding-top: 1em;
	margin-top: 0.5em;
}

/* Profile logos - right side */
.profile-logos {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
}

.profile-logos img {
	height: 75px;
	width: auto;
	opacity: 0.85;
}


/*-- img left --*/
.img_left {
	display: inline-block;
	border-color: #e0e0e0;
	border-width: 1px;
	border-style: solid;
	padding: 0 10px 0 10px;
	background-color: #fafaf8;
}


.img_left > div {
	float: left;
	text-align: center;
	margin: 0.5em;
    padding: 0.5em;
}

.img_left .title {
  top: 10;
  bottom: 0;
  right: 10;
  left: 10;
  font-size: smaller;
  font-style: italic;
  text-decoration: underline;
}

.img_left .title2 {
  font-size: smaller;
  font-style: italic;
}

.img_left span {
}

.img_left span > p {
	text-align: justify;
}

.img_left img {
	box-sizing: border-box;
	width: 300px;
	height: auto;
	margin: auto;
	padding: 0px 0px 0px 0px;
	display: inline-block;
}

/* img right */
.img_right {
	display: inline-block;
	border-color: #e0e0e0;
	border-width: 1px;
	border-style: solid;
	padding: 0 10px 0 10px;
	background-color: #fafaf8;

}

.img_right > div {
	float: right;
	text-align: center;
	margin: 0.5em;
    padding: 0.5em;
}

.img_right .title {
  top: 10;
  bottom: 0;
  right: 10;
  left: 10;
  font-size: smaller;
  font-style: italic;
  text-decoration: underline;
}

.img_right .title2 {
  font-size: smaller;
  font-style: italic;
}

.img_right span > p {
	text-align: justify;

}

.img_right img {
	box-sizing: border-box;
	width: 400px;
	height: auto;
	margin: auto;
	padding: 5px 20px 0px 0px;
	display: inline-block
}

/*-------------------- Social buttons -----------------------*/

#finalline {
	display: none;
}

.socialbuttons {
  margin: 0 auto 0 auto;

}

.socialbuttons ul {
  margin: 20px 0 0 0;
  text-align: center;
}

.socialbuttons ul li {
  display: inline;
  margin: 0 8px;
}

.socialbuttons ul li a {
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.socialbuttons ul li a:hover {
  opacity: 0.7;
}

.socialbuttons ul li svg {
  width: 24px;
  height: 24px;

}

.socialbuttons .twitter svg {
  fill: #1DA1F2;
}

.socialbuttons .gmail svg {
  fill: #ff3f0f;
}

.socialbuttons .github svg {
  fill: #6cc644;
}

#footer {
	padding: 20px 0;
	border-top: 1px solid #e0e0e0;
	margin-top: 2rem;
}

.copyright {
	text-align: center;
	font-size: 0.85em;
	color: #888;
	margin-top: 10px;
}

/* Section headers */
h2 {
	color: #1a1a2e;
	font-family: 'Vollkorn', serif;
	font-weight: 600;
	margin-top: 2rem;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #4ecdc4;
}

/* Horizontal rules */
hr {
	border: none;
	border-top: 1px solid #e0e0e0;
	margin: 1.5rem 0;
}

/* External link indicator */
.webcontent a[target="_blank"]:after {
	content: " ↗";
	font-size: 0.8em;
}

/* PDF link styling */
.pdf {
	margin-top: 4px;
}

/* mobile device */

}

/* --------------------------------------------------------------------------------------------------------------------------------------------*/


/* --------------------------------------------------------------------------- CELLPHONE VIEW ----------------------------------------------------------*/
/*https://www.websitedimensions.com/*/
@media screen and (max-width: 768px){


/* -------------------------     General   ------------------------*/
.backgroundcolor {
	 background-color: #fafaf8
}

/* -------------------------  Menu   ------------------------*/

.webhead {
	margin: 0px;
	width: 100%;
	padding: 10px;
	background-color: #f0f0f0;
	border-bottom: 2px solid #e0e0e0;
}

label {
	display: block;
	position: absolute;
	right: 15px;
	top: 15px;
	color: #1a1a2e;
}

#menu {
	position: absolute;
	top: 60px;
	left: 0;
	width: 100%;
	background-color: #ffffff;
	border-bottom: 1px solid #e0e0e0;
	opacity: 0.98;
	transform: translateX(-110%);
	transition: transform 0.3s ease;
}

#menu ul {
	display: block;
}

#menu #name {
	padding: 10px 15px;
}

#menu #name a {
	font-size: 1.1em;
	border-bottom: 2px solid #4ecdc4;
}

#menu .mylink a {
	font-size: 1em;
	padding: 12px 15px;
	color: #1a1a2e;
}

#menu .nav-separator {
	display: none;
}

#menu ul li:hover + .dropdown-content, #menu .dropdown-content:hover   {
	display: none;
}

#menu a span {
	position: absolute;
	right: 5px;
	font-size: 0.7em;
}

#btn-menu:checked ~ #menu {
	transform: translateX(0%)
}


/* animation underlining */
#menu #name a:before {
	display: none;
}

#menu .mylink a:before {
    margin: 0px 0px 0px 0px;
	width: 30%;
}


/*---------------------------------- content -----------------------*/
.webcontent {
	margin: auto;
	width: 100%;
	padding: 20px;
	background-color: #fafaf8;
	color: #262626;
	font-family: 'Vollkorn', serif;
	font-size: 1.05em;
	line-height: 1.6;
}
.col-xs-12  {
    display: flex;
    flex-direction: column-reverse;
}

#finalline {
	display: block;
}

.profile-name {
	font-size: 1.4em;
}

@media (max-width: 768px) {
	.img_profile {
		flex-direction: column; /* Stack items in a column for mobile */
		align-items: center; /* Center items in mobile view */
		text-align: center;
	}
	.profile-text img {
		margin-top: 10.5px; /* Add space above the image in mobile view */
		margin-bottom: 0.5px; /* Add space below the image in mobile view */
		max-width: 180px; /* Slightly smaller on mobile */
	}
	.profile-logos {
		display: none; /* Hide logos on mobile */
	}

       .page-header-online {
        display: block; /* or any display value appropriate for your layout */
	font-family: 'Vollkorn', serif;
	font-size: 1.2em
        }

	/* Larger tap targets for mobile */
	.webcontent a {
		padding: 4px 0;
		display: inline-block;
	}

	h2 {
		font-size: 1.3em;
	}

	.profile-bio {
		text-align: left;
	}
}


}