styles.css

body{
    background-color: #d1d1d1;
}
#text-display {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;    /* 垂直居中 */
  font-size: 12px;
  height: 16px;
}

 .navbar {
    background-color: black !important; /* 背景颜色变黑 */
    width: 100vw; /* 设置 navbar 宽度为视口宽度 */

  }

  .navbar-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }

/* 响应式优化 */
@media (max-width: 768px) {
    .navbar ul {
      flex-direction: column; /* 垂直排列 */
      align-items: center; /* 居中排列 */
      width: 100%; /* 保证 ul 充满父容器宽度 */
    }
  }

  .navbar .navbar-brand,
  .navbar .nav-link {
    color: #dcdcdc !important; /* 字体颜色改为淡灰 */
  }
  
  .navbar .nav-link:hover,
  .navbar .dropdown-menu .dropdown-item:hover {
    background-color: grey !important; /* 悬浮时背景变灰 */
    color: #ffffff !important; /* 字体保持白色 */
  }
  
  .nav-item {
    border-left: 1px solid #696969; /* 左边框为浅灰色 */
    border-right: 1px solid #696969; /* 右边框为浅灰色 */
    border-top: none; /* 去掉顶部边框 */
    border-bottom: none; /* 去掉底部边框 */
    padding: 0; /* 窄化边框区域的间距 */
  }
  
  .dropdown-menu {
    background-color: black; /* 下拉菜单背景变黑 */
    border-color: #696969; /* 下拉菜单边框为浅灰色 */
  }
  
  .dropdown-item {
    color: #dcdcdc; /* 下拉菜单字体颜色为淡灰 */
  }
  
  .dropdown-item:hover {
    background-color: grey; /* 下拉菜单项悬浮时背景变灰 */
    color: white; /* 字体保持白色 */
  }

.whole-page{
    max-width: 1600px; /* 设置页面最大宽度 */
    margin: 0 auto; /* 居中显示 */
}

.namecard{
    background-color: #fff;
    border-color: black;
    border-width: 2px;
    border-radius: 10px;
    padding: 10px;
    width: 15%;
    height: auto;
    margin-top: 10px;
}

.namecard:hover{
    box-shadow:#c2c2c2 0px 0px 20px;
}


.img-me{
    border-color: rgb(62, 164, 237);
    border-top: 15px;
    width: 100%;
    max-width: 100%;
    height: auto;

}

.name{
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;    /* 垂直居中 */
    width: 100%;
    height: 30px;          /* 可根据需要调整高度 */
}
.icon-container{
  border-top: 1px solid rgba(0, 0, 0, .05) !important;
  display: flex; /* 使用 flex 布局 */
  flex-wrap: wrap; /* 允许换行 */
  gap: 5px; /* 图标之间的间距 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: auto;
  max-width: 100%;
  height: auto;
  padding: 5px;
}
 .icon-button {
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  background-color: lightgray;
  border-color: black;
  border-width: 2px;
  border-radius: 100%;
  padding: 5px;
  width: 30px;
  height: 30px;
}

.icon-button a {
  display: flex; /* 确保链接也使用 flexbox */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 100%;
  height: 100%;
}

.icon-button svg {
  width: 1em !important; /* 设置 SVG 宽度 */
  height: 1em !important; /* 设置 SVG 高度 */
}


.platform{
  margin: 0 auto;
  border-color: black;
  border-width: 2px;
  background-color: #fff;
  border-radius: 10px;
  width: 930px;
  padding-top: 10px;
  padding-bottom: 30px;
 
}

#chart-container {
  display: flex;
  margin: 0 auto;
  width: 880px;
  height: auto;
  overflow: visible;
  border-radius: 5px;
  background-color: rgb(0, 255, 255,0.5);
}

#chart-container svg {
  width: 880px;
  height: 800px;
  position: absolute;
  pointer-events: none;
  
}
text{
  z-index: 1;
  font-size: 24px;
}

span{
  display: flex;
  flex-wrap: wrap;
}