.nav-title:hover {
    text-decoration: underline;
  }
  #map {
    width: 70%;
    height: 500px;
    margin: 5em auto;
  }

/* 📌 导航栏样式 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  gap: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar a {
  text-decoration: none;
  color: black;
  font-size: 1rem;
  font-weight: bold;
  transition: color 0.3s;
}

.navbar a:hover {
  color: gray;
  text-decoration: underline;
}

/* 📌 让导航栏不遮挡内容 */
body {
  padding-top: 50px; /* 避免内容被导航栏挡住 */
}

/* 让所有内容居中 */
main {
  text-align: center;
}

/* 📌 让项目滚动进入 */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 📌 让项目图片适应大小 */
.project-thumbnail {
  width: 700px;
  height: auto;
  display: block;
  margin: 10px auto;
  border-radius: 10px;
}

/* 📌 让项目部分有足够的间距 */
#projects {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}


/* 📌 导航栏样式 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  gap: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar a {
  text-decoration: none;
  color: black;
  font-size: 1rem;
  font-weight: bold;
  transition: color 0.3s;
}

.navbar a:hover {
  color: gray;
  text-decoration: underline;
}

/* 📌 About 页面样式 */
#about {
  max-width: 800px;
  margin: 80px auto;
  padding: 20px;
  text-align: left;
}

#about h2 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.about-content p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 15px;
}

.about-content strong {
  font-weight: bold;
  color: #222;
}

.about-content em {
  font-style: italic;
  color: #444;
}

/* 页脚样式 */
footer {
  text-align: center;
  padding: 10px 0;
  font-size: 0.9rem;
  color: #777;
}


/* 📌 让项目详情居中 */
.project-detail {
  max-width: 1300px;
  margin: 100px auto;
  padding: 20px;
  text-align: left;
}

/* 📌 主要标题 */
.project-detail h1 {
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
  color: #222;
}

/* 📌 副标题 */
.project-detail .subtitle {
  font-size: 1.3rem;
  font-style: italic;
  text-align: center;
  color: #555;
  margin-bottom: 20px;
}

/* 📌 项目图片样式 */
.project-image {
  width: 100%;
  max-width: 1100px;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 8px;
}

/* 📌 文字描述 */
.project-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #444;
}

/* 📌 让强调文字更明显 */
.project-description strong {
  font-weight: bold;
  color: #222;
}

.project-description em {
  font-style: italic;
  color: #555;
}



body {
	margin: 0;
	padding: 0;
}

#map {
	width: 100%;
	height: 100%;
	margin: 0 0;
}
.mapboxgl-popup-content h4 {
	font-weight: 500;
	font-size: 0.9em;
	border-width: 0px 0px 0.5px 0px;
	border-style: solid;
	border-color: rgb(80, 80, 80);
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
.mapboxgl-popup-content p {
	font-weight: 300;
	margin-top: 0.3em;
	margin-bottom: 0em;
}
#menu {
	background: #fff;
	position: absolute;
	z-index: 1;
	bottom: 30px;
	right: 3em;
	border-radius: 3px;
	width: 120px;
	border: 1px solid rgba(0, 0, 0, 0.4);
	font-family: 'Open Sans', sans-serif;
}
#menu a {
	font-size: 13px;
	color: #404040;
	display: block;
	margin: 0;
	padding: 0;
	padding: 10px;
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.25);
	text-align: center;
}
#menu a:last-child {
	border: none;
}
#menu a:hover {
	background-color: #f8f8f8;
	color: #000000;
}
#menu a.active {
	background-color: #404040;
	color: #ffffff;
}
#menu a.active:hover {
	background: #000000;
}
.title {
	background-color: #fff;
	opacity: 70%;
	border-radius: 1em;
	top: 5em;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	font: .8em/.9em 'Open Sans', sans-serif;
	line-height: 2.5em;
	padding: 1em 2em 0em;
	position: absolute;
	max-width: 25%;
	margin: 0em 5em;
	z-index: 100;
}
.title h1{
	opacity: 100%;
}
.title p {
	line-height: 1.5em;
	opacity: 100%;
}
.title div span {
	border-radius: 50%;
	display: inline-block;
	height: 10px;
	margin-left: 5px;
	width: 10px;
}
.title hr {
	border-top: .2em dashed #404040;
	border-bottom: 0em;
	margin-top: .75em;
	margin-bottom: .75em;
}
.legend {
	font: 1em/1.5em 'Open Sans', sans-serif;
	padding: 1em 1em 2em 1em;
	position: relative;
	right: 10px;
	z-index: 100;
	opacity: 100%;
}
.legend h4 {
	margin: 0 0 10px;
	opacity: 100%
}
.legend div span {
	border-radius: 0%;
	display: inline-block;
	height: 10px;
	margin-top: 0px;
	margin-right: 20px;
	width: 10px;
}
.legend2 {
	font: 1em/1.5em 'Open Sans', sans-serif;
	padding: 1em 1em 1em 1em;
	position: relative;
	right: 10px;
	z-index: 100;
	opacity: 100%
}
.legend2 h4 {
	margin: 0 0 0px;
	opacity: 100%
}
.legend2 p {
	padding-top: 0px;
	margin-top: 0px;
}
.legend2 div span {
	border-radius: 50%;
	border-style: solid;
	border-color: black;
	border-width: 1px;
	margin: auto;
	display: inline-block;
	height: 5px;
	margin-top: 0px;
	margin-right: 10px;
	margin-left: 10px;
	width: 5px;
	opacity: 100%
}













/* ✅ 让地图填满屏幕 */
#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

/* 📌 让 legend 显示在地图左侧 */
#legend {
  position: absolute;
  bottom: 30px;
  left: 20px; /* ✅ 由 right 改成 left */
  width: 350px;
  background: rgba(255, 255, 255, 0.9);
  padding: 15px;
  border-radius: 8px;
  font: 1em/1.5em 'Open Sans', sans-serif;
  font-family: Arial, sans-serif;
  font-size: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* 📌 让标题左对齐 */
.legend-title {
  font: 1em/1.5em 'Open Sans', sans-serif;
  font-size: 19px;
  font-weight: bold;
  color: #0d0d2b;
  text-align: left; /* ✅ 由 center 改成 left */
  margin-bottom: 10px;
}

/* 📌 让描述左对齐 */
.legend-description {
  font: 1em/1.5em 'Open Sans', sans-serif;
  font-size: 12px;
  color: #555;
  line-height: 1.4;
  text-align: left; /* ✅ 由 justify 改成 left */
  margin-bottom: 10px;
}

/* 📌 让所有 legend 内容左对齐 */
#legend h4 {
  font: 1em/1.5em 'Open Sans', sans-serif;
  margin: 10px 0 5px;
  font-size: 10px;
  font-weight: bold;
  color: #333;
  text-align: left; /* ✅ 让所有标题左对齐 */
}

#legend div {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

/* 📌 让洪水颜色透明 */
#legend span {
  width: 20px;
  height: 10px;
  margin-right: 10px;
  display: inline-block;
  border-radius: 3px;
  opacity: 0.7; /* ✅ 让所有颜色块都有透明度 */
}


/* 📌 洪水的 popup（淡淡的灰色，带蓝紫色调） */
.flood-popup .mapboxgl-popup-content {
  background-color: #ECECF5;  /* 淡蓝紫灰色 */
  color: #33334F;  /* 深一点的蓝灰色 */
  border-radius: 5px;
  border: 1px solid #C8C8E0; /* 低饱和度蓝紫色边框 */
  font-family: Arial, sans-serif;
}

/* 📌 Green Infrastructure 的 popup（保持默认或修改） */
.green-popup .mapboxgl-popup-content {
  background-color: #F5FBEF;  /* 淡绿色 */
  color: #4A6A30;  /* 绿色系文字 */
  border-radius: 5px;
  border: 1px solid #C6E5B1; /* 低饱和度绿色边框 */
  font-family: Arial, sans-serif;
}

/* 让 popup 的箭头颜色也跟随变 */
.flood-popup .mapboxgl-popup-tip {
  border-top-color: #ECECF5;
}
.green-popup .mapboxgl-popup-tip {
  border-top-color: #F5FBEF;
}



/* 📌 让导航栏固定在顶部 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.90); /* 透明度 95%，不完全挡住地图 */
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  gap: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* 确保导航栏在最上方 */
}

/* 📌 让地图填满屏幕，但不被导航栏遮住 */
#map {
  position: absolute;
  top: 50px; /* 避免被导航栏遮挡 */
  left: 0;
  width: 100%;
  height: calc(100vh - 50px);
}

/* 📌 导航栏链接样式 */
.navbar a {
  text-decoration: none;
  color: black;
  font-size: 1rem;
  font-weight: bold;
  transition: color 0.3s;
}

.navbar a:hover {
  color: gray;
  text-decoration: underline;
}

body {
  display: block;
}







/* ✅ 让介绍部分有合适的间距 */
#introduction {
  max-width: 800px; /* ✅ 控制最大宽度，避免文字铺满整个屏幕 */
  margin: 120px auto 60px; /* ✅ 顶部 120px（防止贴近导航栏），底部 60px */
  padding: 20px;
  text-align: center;
}

/* ✅ 让介绍文字不会贴边，并且适应不同屏幕 */
#introduction p {
  font-size: 16px;
  line-height: 1.6;
  color: #444;
  text-align: justify;
  margin: 0 40px; /* ✅ 让文字两侧有 40px 的留白，提高可读性 */
}

/* ✅ 让超链接更美观 */
#introduction a {
  color: #0066cc;
  font-weight: bold;
  text-decoration: none;
}

#introduction a:hover {
  text-decoration: underline;
}




.project-description {
  max-width: 700px;
  margin: 0 auto; /* 自动左右居中 */
  padding: 1rem 1.5rem; /* 可选，增加内边距 */
  line-height: 1.6;
}

.project-image {
  display: block;            /* 让图片作为块元素独占一行 */
  max-width: 70%;          /* 控制最大宽度（你也可以设置成 70% 试试看） */
  width: 100%;               /* 自动适配小屏幕 */
  margin: 2rem auto;         /* 上下间距 + 左右自动居中 */
  border-radius: 8px;        /* 可选：让图片有圆角，更优雅 */
}