body{
		font-family: Arial, serif, sans-serif;
		font-weight: 200;
		font-size: 92%;
		position: relative;
	}

	.body_index {
		background-color: #ffffff;
	}
	.body_style {
		background-color:#ffffff;
	}
	.subtitle{
		color: #563D7C;
		font-family:  'Lato', sans-serif;
		text-align:center;
		font-weight: 360;
		margin-bottom: 2%;
		margin-top: 2%;
		font-size:190%;
	}

	strong {
		font-weight: bold;
	}

	
	.content-block{		    
		margin-bottom: 5%;		
	
	}
	.Logo {
		width: 40px;
		height: 40px;
		float: right;
		margin: 0;
		background-color: transparent; /* ensures no background is added */
		box-shadow: none;              /* removes any shadow if applied */
	}
	#Main-Part{
		margin:0;
	}
	.extra-roles{
		font-size:100%
	
	}
	.sub-skills{
		margin: 0;
	
	}
	
	.yuwei-name{
		font-family: "Times New Roman", Times, serif;
		font-weight: bold;
		color:#563D7C;
		font-style:italic;
	}



	.papers{
		font-family: Arial, cursive,sans-serif;
	}

	.paper_title{
		font-family: Arial, cursive,sans-serif;
		font-weight: bold;
	}		
	.container.custom-container-width {
		max-width: 1000px; 
	}

	.time-place{
		text-align: right;
	}
	.circular--squareP {
		width: 70%;
		height: auto;
		border-radius: 5%;
		max-width: 200px;  /* Optional: limits size on large screens */
		display: block;
		margin: 5% auto; /* Centers the image */

	  }
	  

	.circular--img {
		width: auto;  /* Maintain original width */
		height: auto; /* Maintain original height */
		max-width: 100%; /* Prevent overflow */
		display: block; /* Removes extra spacing */
	}

	
	.fa_custom {
			color: #FFD700;
	}	

	.progress{
		width: 30%;
		float:right;
	}
	.skills{margin:10%;}
	.copyright {text-align: center;}


	.social-icon {
		font-size: 16px;      /* Adjust size here */
		margin: 0 5px;        /* Spacing between icons */
		color: #563D7C;       /* Default icon color */
		text-decoration: none;
		transition: color 0.3s;
	  }
	
	.social-icon:hover {
	    color: #563D7C;       /* Color on hover */
	}



	.centered-profile {
		text-align: center;
		margin: 0 auto; /* Centers the profile section */
		max-width: 300px; /* Optional: limits the width of the profile section */
	}
	  

	/* News Section Styles */
	.soft-border {
		border-radius:5%;    /* Adjust to your preferred curve */
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);  /* Optional: adds soft shadow */
		transition: transform 0.3s ease;
	  }
	
	  .soft-border:hover {
		transform: scale(1.03);   /* Slight zoom on hover (optional) */
	  }
	
	  .news-section {
		max-width: 600px;
		margin: auto;
		font-family: Arial, sans-serif;
		font-size: 14px;
	  }
	  
	  .news-section h3 {
		font-weight: 600;
		margin-bottom: 8px;
		font-size: 16px;
	  }
	  
	  .news-list {
		list-style: disc;
		padding-left: 16px;
		margin: 0;
	  }
	  
	  .news-list li {
		margin-bottom: 4px;
		line-height: 1.4;
	  }
	  
	  .news-list a {
		color: #007bff;
		text-decoration: none;
	  }
	  
	  .news-list a:hover {
		text-decoration: underline;
	  }
	  
	  .toggle-button {
		margin-top: 6px;
		display: inline-block;
		cursor: pointer;
		color: #007bff;
		font-weight: 600;
		font-size: 13px;
	  }
	  
	  .toggle-button:hover {
		text-decoration: underline;
	  }
	  
	/* Background container */
	.background-container {
		position: relative;
		width: 100%;
		height: 600px;
		background: url('img/background.jpg') no-repeat center center/cover;
		background-size: cover;
		overflow: hidden;
	}
	
	/* Gradient overlay */
	.background-container::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%; /* <- THIS was missing */
		background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
		z-index: 1;
		pointer-events: none; /* Optional: lets clicks pass through */
	}
	/* Custom Navbar Styles */
	.navbar-custom {
		background-color: #fff;
		border: none;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		font-family: 'Lato', sans-serif;
		font-weight: 360;
		font-size: 18px;
	}
	
	/* Navbar links and branding */
	.navbar-custom a,
	.navbar-custom .nav-link,
	.navbar-custom .navbar-brand {
		color: #757575;
	}

	/* Emphasize name part of the brand */
	.name-bold {
		font-weight: 600;
	}
	.navbar-brand {
		flex-shrink: 1;
		min-width: 0;
	  }

		/* Show by default */
	.navbar-brand {
		display: flex;
		align-items: center;
		font-size: 18px;
		white-space: nowrap; /* prevent wrapping */
	}
	
	/* Hide the text when screen is too narrow (or zoomed in) */
	@media (max-width: 800px) {
		.navbar-brand {
		display: none;
		}

	}

	/* Hide the text when screen is too narrow (or zoomed in) */
	@media (max-width: 700px) {
		.circular--squareP {
			width: 50%;
			max-width: 300px;
		}
	}


	.video-wrapper {
		position: relative;
		width: 100%;
		padding-bottom: 75%; /* 4:3 aspect ratio */
		height: 0;
		overflow: hidden;
		border-radius: 0px;
	}
	  
	.video-wrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: none;
	}

	.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	}
body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background-color: #f9f9f9;
  margin: 0;
}

/* Center the entire grid container */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1200px;     /* optional: controls how wide the content can stretch */
  margin: 0 auto;        /* centers the grid horizontally */
  justify-items: center; /* ensures each card is centered in its cell */
}

.card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s;
  padding: 10px;
  width: 100%;           /* ensures it fits inside grid cell */
  max-width: 300px;      /* optional: sets max width of each card */
  text-align:center;
}

.card:hover {
  transform: scale(1.02);
}

.card img {
  width: 100%;
  height: auto;
  display: block;
}

.caption {
  padding: 10px;
  font-weight: bold;
  color: #800000;
  text-align: center;
}