body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #000;
  color: #fff;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* 保持 relative 以便页脚绝对定位 */
}

.container {
  display: flex;
  align-items: center; /* 上下居中对齐 */
  justify-content: space-between;
  width: 100%; /* 宽度设为 100% */
  max-width: 1200px; /* 限制最大宽度 */
  height: 80vh; /* 确保容器高度适应视口 */
  padding: 20px;
  box-sizing: border-box;
  margin: 0 auto; /* 居中容器 */
}

.right-column {
  flex: 1;
  margin-left: 30px;
  padding-right: 30px; /* 适中的右内边距 */
  box-sizing: border-box; /* 确保内边距包含在宽度中 */
}

.no-select {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+/Edge */
  user-select: none;         /* 标准 */
}

.left-column {
  flex: 1;
  margin-right: 30px;
}


.vertical-line {
  height: 100%; /* 垂直线的高度适应容器 */
  margin: 0 30px; /* 设置适中的边距 */
}

.header {
  margin-bottom: 20px;
}

h1 {
  font-size: 2em;
  margin: 0;
}

.chinese-name {
  border-top: 1px solid #fff;
  text-align: right;
  font-size: 1.5em;
  margin: 0;
}

.description, .contact, .projects-section {
  margin-bottom: 30px;
}

.description p, .contact p, .more {
  font-size: 1.5em;
  margin: 0;
  text-align: center;
}


.contact a {
  color: #fff;
  text-decoration: none;
}

.projects-section h2 {
  font-size: 1.8em;
  margin: 0 0 20px;
}

.projects {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 固定两列 */
  gap: 20px;
  margin-bottom: 20px;
}



.project-box {
  border: 1px solid #fff;
  height: 100px; /* 高度设置为 100px */
  width: 200px;  /* 宽度设置为 200px，使比例为 1:2 */
  background-color: #181818; /* 增加背景色以便更明显 */
  border-radius: 8px; /* 设置圆角半径 */
  border: none; /* 移除边框 */
}



.more {
  font-style: italic;
  font-size: 1.5em;
}

.footer {
  text-align: center;
  font-size: 1.2em;
  padding-top: 20px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

 a {
  color: #fff; /* 设置链接颜色为白色 */
  text-decoration: none; /* 删除下划线 */
}
/* 移动端适配 */
@media (max-width: 900px) {
  .container {
    flex-direction: column; /* 切换为上下布局 */
    height: auto; /* 高度自动适应内容 */
    align-items: center; /* 居中对齐 */
  }

  .right-column, .left-column {
    width: 100%; /* 确保列宽度适应容器 */
    padding: 0;
    margin: 0;
  }

  .vertical-line {
    display: none; /* 隐藏垂直线 */
  }

  .projects {
    grid-template-columns: 1fr; /* 单列布局 */
  }

  .project-box {
    width: 100%; /* 项目框宽度适应父容器 */
    height: auto; /* 高度自动适应内容 */
  }

  .footer {
    position: relative; /* 确保相对定位 */
    width: 100%; /* 确保页脚宽度适应屏幕 */
    margin: 20px 0 0 0; /* 顶部外边距以便与内容分隔 */
    text-align: center; /* 确保页脚内容居中对齐 */
  }
}