@font-face {
    font-family: 'KyivTypeSerif-Light2';
    src: url('../fonts/kyiv-type-serif/KyivTypeSerif-Light2.otf') format('opentype'); /* 指定 OTF 字体的路径和格式 */
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'Songti SC';
  src: url('../fonts/Songti-SC/Songti-subset.woff2') format('woff2');
  font-display: swap;
}

* {
    box-sizing: border-box; /* 确保 padding 和边框不会增加宽度 */
    max-width: 100%; /* 所有元素的宽度不会超过视口 */
}

html, body {

    margin: 0px;
    margin-top: 0px;
    font-family: "Urbanist", sans-serif;
    font-optical-sizing: auto;
    font-weight: 130;
    font-style: normal;
    line-height: 1.4;
    background-color: #eeeeee;/* #EDF2F1; */
    scrollbar-width: none; /* 针对 Firefox 隐藏滚动条 */
    -ms-overflow-style: none; /* 针对 Internet Explorer 和 Edge 隐藏滚动条 */
    overflow-x:hidden;
    
}

body::-webkit-scrollbar {
    display: none; /* 针对 Chrome、Safari 和新版 Edge 隐藏滚动条 */
}


.navbar {
    display: flex;
    justify-content: space-between; /* 按钮间距自适应 */
    align-items: center;
    position: fixed; /* 固定在屏幕顶部 */
    width: 100%; /* 占据整个宽度 */
    z-index: 1000; /* 确保导航栏在其他内容之上 */
    padding: 10px;
    /*底部边框*/
    border-bottom: 0.5px solid #ffffff; /* 添加底部边框 */
    mix-blend-mode: difference; /* 反转颜色以适应不同背景 */

    
}

.navbar-left {
    font-family: 'KyivTypeSerif-Light2', sans-serif;
    font-size: clamp(12px, 2vw, 16px); /* 字体大小动态变化 */
    white-space: nowrap; /* 禁止换行 */
    
}

.navbar-right {
    display: flex;
    font-size: clamp(12px, 2vw, 16px); /* 字体大小动态变化 */
    gap: 15px; /* 让按钮有适当的固定间距，但整体布局自适应 */
}

.navbar-right a,
.navbar-left a {
    text-decoration: none;
    color: #ffffff;
    border-radius: 0px;
    transition: background-color 0.1s, color 0.1s;

}

.navbar-right a.current_page {
    text-decoration: none;
    color: rgb(169, 157, 164); /* 当前页高亮色 */
    border-radius: 0px;
    /* 其他你想要的样式 */
}

.navbar-right a:hover,
.navbar-left a:hover{
    color: rgb(169, 157, 164); /* 当鼠标悬停时改变颜色 */
}

.title {
    padding-top: 120px;
    text-align: center; /* 让 inline-block 元素居中 */
    width: auto;
    margin: 0 auto;
    font-size: clamp(20px, 2vw, 40px); /* 字体大小动态变化 */
}



.content_top{
    text-align: center; /* 让 inline-block 元素居中 */
    width: auto;
    font-size: clamp(14px, 1vw, 16px); /* 字体大小动态变化 */
    padding-bottom: 100px;
    white-space: normal; /* 允许文本正常换行 */
    font-weight: 200;

}


.content {
    text-align: center;
    width: auto;
    margin: 0 10vw; /* 默认（mobile） */
    font-size: clamp(14px, 2vw, 16px);
    white-space: normal;
}


.info {
    color: #b1b1b1;
    text-align: center; /* 让文本中央对齐 */
    width: auto;
    margin: 0 10vw;
    font-size: clamp(12px, 2vw, 14px); /* 字体大小动态变化 */
    white-space: normal; /* 正常的换行行为 */
    word-wrap: break-word; /* 确保长单词能换行 */
    word-break: break-word; /* 确保即使没有空格的长词也能换行 */
}

.info a {
    color: #b1b1b1; /* 修改 Markdown 中超链接的颜色 */
                    transition: background-color 0.1s, color 0.1s;

}
.content a {
    color: rgb(0, 0, 0); /* 修改 Markdown 中超链接的颜色 */
                    transition: background-color 0.1s, color 0.1s;

}

.title .zh,
.info .zh,
.content .zh,
.info_projects .zh {
    font-weight: 200;
}

.footer-content a:hover,
.info a:hover,
.content a:hover {
    color: rgb(86, 98, 91); /* 当鼠标悬停时改变颜色 */
}

.info_projects {
    text-align: center; /* 让文本左对齐 */
    width: auto;
    margin: 0 10vw;
    font-size: clamp(12px, 2vw, 14px); /* 字体大小动态变化 */
    white-space: normal; /* 正常的换行行为 */
    word-wrap: break-word; /* 确保长单词能换行 */
    word-break: break-word; /* 确保即使没有空格的长词也能换行 */
}



.info_projects a:hover,
.content a:hover {
    color: rgb(86, 98, 91); /* 当鼠标悬停时改变颜色 */
}

.divider {
    height: 5vw;
}

.divider-05 {
    height: 2vw;
}

.divider-033 {
    height: 1.3vw;
}

.divider-1px {
    height: 1px;
}
.divider-5px {
    height: 5px;
}

hr.divide-line {
  border: none;
  border-top: 0.5px solid #b1b1b1;
  margin: 0; /* 去除上下间距 */
  height: 0; /* 避免多余高度 */
}



.video-container {
    position: relative; /* 保持容器的相对定位 */
    margin: 0px 0vw;
    

    height: 56.25vw; /* 让高度自动根据宽度和比例调整 */
    overflow: hidden;
    background: #171717; /* 背景颜色可以根据需要调整 */
    
}

.video-container iframe {
    position: absolute; /* 绝对定位，使 iframe 填满容器 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.gallery {
    display: grid;
    grid-template-columns: repeat(1, minmax(100px, 1fr)); /* 自动调整列数 */
    gap: 0px; /* 格子之间的间隙为 1px */
    padding-bottom: 0px;
    width: 100%; /* 占满父容器宽度 */
    margin: 0 auto; /* 居中对齐 */
}


.gallery a,
.gallery-05 a,
.gallery-1 a,
.gallery-2 a,
.gallery-3 a{
width: 100%;
height: 100%;
text-decoration: none;

}

.gallery img {
width: 100%;
height: 100%;
object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}

.gallery-05{
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 将列数设置为 3 列 */
    gap: 1px; /* 每张图片之间的间隙 */
    margin: 0px 30%;

}


.gallery-1{
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 将列数设置为 3 列 */
    gap: 1px; /* 每张图片之间的间隙 */
    margin: 0px 35%;

}

.gallery-1 > div {
    display: table-row; /* 定义为表格行 */

}

.gallery-2{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 将列数设置为 2 列 */
    gap: 1px; /* 每张图片之间的间隙 */

}

.gallery-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 将列数设置为 3 列 */
    gap: 1px; /* 每张图片之间的间隙 */
}

.gallery-05 img,
.gallery-1 img,
.gallery-2 img,
.gallery-3 img {
    width: 100%;
    height: auto; /* 自动调整高度以保持图片比例 */
    object-fit: contain; /* 确保图片保持原始比例，适应容器 */
}


  .table-container {
    width: 100%; /* 父容器占满宽度 */
    padding: 2vw 10vw; /* 为表格添加内边距效果 */
    box-sizing: border-box; /* 确保内边距不会影响容器大小 */

  }
  
  .tag-table {
    border-spacing: 0; /* 去除单元格间距 */
    border-collapse: collapse; /* 合并边框 */
    table-layout: auto; /* 让单元格宽度自动适应内容 */
    margin: 2vw;

}
  
  .tag-table td {
    width: 100%;
    padding: 10px 0; /* 单元格内边距 */
    text-align: left; /* 文本水平靠左对齐 */
    font-size: clamp(12px, 2vw, 16px);
  }
  
  .tag {
    display: inline-block; /* 将 tag 设置为内联弹性容器 */
  }
  
  .tag-icon {
    height: clamp(16px, 2vw, 18px); /* 图标宽度 */
    width: clamp(14px, 2vw, 16px); /* 图标高度 */
    object-fit: contain; /* 确保图片按比例缩放 */
    vertical-align: middle; /* 确保图标与文字垂直居中 */

    padding: 0 1px 3px 2px; /* 控制 tag 内部的水平内边距 */


  }
  
  .tag-text {
    /*font-style: italic;*/
    font-size: clamp(12px, 2vw, 14px);
    text-decoration: underline; /* 添加下划线 */
    color: #000000; /* 修改 Markdown 中超链接的颜色 */

  }
  
  .tag-text:hover {
    color: rgb(86, 98, 91); /* 当鼠标悬停时改变颜色 */
  }


  .site-footer {
    font-size: 12px;
    text-align: center; /* 文本居中 */
    padding: 10px 10px; /* 内边距 */
    position: relative; /* 保持在页面底部 */
    width: 100%; /* 占满页面宽度 */
    border-top: 0.5px solid #000000;
    color: #000000;
}

.footer-content a {
    color: #000000; /* 修改超链接的颜色 */
    text-decoration: none; /* 去掉链接下划线 */
                    transition: background-color 0.1s, color 0.1s;

}

/* 在较大屏幕上使用 28vw（laptop/desktop） */
@media (min-width: 700px) {
    .content {
        margin: 0 29vw;
    }
        .info {
        margin: 0 29vw;
    }
}