html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;

}

/* 全视口的设置背景图片set the background image of the whole viewport */
#wholepageview {
    position: relative;
    /* 使伪元素能够相对于此定位 */
    overflow: hidden;
    /* 确保伪元素不会超出容器边界 */
    container: fluid;
    /* 水平垂直居中对齐 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

#wholepageview::before {
    content: '';
    /* 伪元素需要内容来显示 */
    position: absolute;
    /* 绝对定位 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(15, 15, 15);
    background-image: url('../images/D_bgimg2.jpg');
    /* background-size: 100% 100%; */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    /* 应用滤镜 */
    filter: brightness(30%) contrast(120%);
    z-index: -1;
    /* 确保伪元素位于内容之后 */
}


#layout {
    display: flex;
    flex-wrap: wrap;
    /* background-color: rgba(255, 255, 255, 0.05); */
    border-radius: 5%;
    margin: 0;
    height: 80%;
    width: 87%;
}


/* 设置侧边栏展开/隐藏 set the sidebar to be collapsed/expanded */

#sidebar {
    flex: 0 0 18%;  
    /* 使 sidebar 的宽度固定 */
    max-width: 50%;
    transition: transform 0.5s ease;
    /* 添加过渡效果 */
    height: 100%;
    background-color:rgba(0, 0, 0, 0.2);
    border: solid rgba(255, 255, 255, 0.2);
    border-radius: 4%;
    /* background: transparent; */
    backdrop-filter: blur(0.25vh);
    -webkit-backdrop-filter: blur(0.25vh); 
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    text-align: center;
}

/* 侧边栏收缩后的样式 Sidebar's style after collapsed */
#sidebar .collapsed {
    transform: translateX(-100%);
    /* 当添加 collapsed 类时，sidebar 完全显示 */
}

/* 设置侧边栏每一块的总体样式 Set the style of each section in the sidebar */
.sidebar-section {
    color: white;
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: auto;
}

/* 侧边栏第一栏-语言切换 sidebar's 1st section---Language switcher */
#Language {
    height: 8%;
}

button.Button-Language {
    display: inline-block;
    padding: 0.5vh 0.5vw;
    font-size: 1.5vh;
    line-height: 1.5vh;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
}

button#btnChinese {
    color: #fff;
    background: none;
    border-color: rgba(250, 250, 250, 0.2);
}

button#btnEnglish {
    color: #fff;
    background-color: rgba(139, 139, 139, 0.1);
    border-color: rgba(250, 250, 250, 0.2);
}

/* 侧边栏第二栏-个人照片 sidebar's 2nd section---Selfie */
#Selfie {
    height: 28%;
    background-image: url('../images/Selfie.jpg');
    background-size: 110% 120%;
    background-repeat: no-repeat;
    background-position: center center;
    vertical-align: center;
    margin: 5% 20%;
    border-radius: 100%;
    border: solid rgba(255, 255, 255, 0.2);
}



/* 侧边栏第三栏-姓名 sidebar's 3rd section---Name */
#Name {
    height: 11%;
    font-size: calc((4vh + 6vw) / 4);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color: rgb(232, 251, 255);
    filter: blur(0.5px);
    opacity: 0.8;
    animation: animate 1s linear infinite;
}

/* 侧边栏第四栏-导航栏 sidebar's 4th section---Navigator */
#Navigator {
    display: grid;
    height: 30%;
    font-size: calc((4vh + 6vw) / 8);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin: 1vh 0;
    position: relative;
    flex-direction: column;
    vertical-align: middle;
    justify-items: center;
    align-items: center;
}

/* 导航栏子栏样式 Style of each section in the navigator */
.Navigator_subpart {
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    height: 25%;
}

/* 导航栏子栏文字样式 */
.nav-link {
    filter: invert(10%);
    /* 将图标变为白色 */
    transition: all 0.3s ease-in-out;
    /* 平滑过渡效果 */
    color: white;
    /* Hide text when collapsed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    align-items: center;
    text-decoration: none;
    margin-left: 0.5vw;
}

/* 导航栏子栏图标样式 */
.icons-in-navigator {
    transition: all 0.3s ease-in-out;
    transform: translateY(-0.4vh);
    display: inline-block;
    filter: invert(50%);
    height: calc((4vh + 6vw) / 6);
    position: relative;
    margin-right: 0.5vw;
}


/* 鼠标悬停状态子栏样式 Subpart's Style when mouse hover */
.Navigator-subpart:hover .icons-in-navigator,
.Navigator-subpart:hover .nav-link {
    transform: scale(1.2);
    /* 放大效果 */
    margin: 0.8vw;
    transition: transform 0.3s ease;
    /* 平滑的过渡效果 */
}

.Navigator-subpart:hover .icons-in-navigator {
    filter: invert(100%);
}


/* 版面切换显示样式 Style when click-switch-active */
.active-section {
    color: rgba(215, 247, 255, 0.9);
    font-size: calc((4vh + 6vw) / 7);
    font-weight: bold;
    border-radius: 0.5vh;
    filter: invert(0%);
}

.active-section-icon {
    filter: invert(100%);
    transform: scale(1.2);
    /* 轻微放大图标 */
}


/* 侧边栏第五栏-icon图标栏 sidebar's 5th Icon-bar for link url */
#Icons {
    height: 10%;
}

#Icons img {
    width: calc((4vh + 6vw) / 6);
    filter: invert(50%);
    /* 将图标变为白色 */
    transition: filter 0.15s, box-shadow 0.15s, transform 0.15s;
    /* 平滑过渡效果 */
    border-radius: 50%;
    /* 为光圈效果创建圆形边框 */
    margin: 0 0.5vw;
    /* 增加左右的间距 */
}

#Icons img:hover {
    filter: invert(90%);
    /* 鼠标悬停时轻微改变颜色 */
    box-shadow: 0 0 50px rgb(255, 255, 255);
    /* 添加白色光圈阴影效果 */
    transform: scale(1.5);
    /* 轻微放大图标 */
}

/* 侧边栏第六栏-版权栏 sidebar's 6th Icon-bar for version copyright */
#Version {
    height: 4%;
    font-size: calc((1vh + 1vw) / 3);
}


/* 主体内容 Main content */
#main-content {
    background: transparent;
    backdrop-filter: blur(0.25vh);
    -webkit-backdrop-filter: blur(0.25vh); /* 为旧版 Safari 和 iOS Safari 添加支持 */
    position: relative;
    height: 100%;
    flex: 1;
    /* 使元素能够填充可用空间 */
    overflow: hidden;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

#main-content.blurred {
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(0.25vh);  /* 为旧版 Safari 和 iOS Safari 添加支持 */


}

#main-content.expanded {
    flex-grow: 1;
    /* 使元素能够填充可用空间 */
}


/* 主体内容主体块 */
#main-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    height: 98%;
    width: 100%;
    border-radius: 0 5vh 5vh 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(143, 143, 143, 0.1);
    filter: drop-shadow(0 1vh 1vh rgba(0, 0, 0, 0.1));
    position: relative;
}

.Main-section {
    position: absolute;
    border-radius: 5vh;
    /* border:#fff solid 0.5vh; */
    text-align: center;
    justify-content: center;
    align-items: center;
    align-content: center;
    transition: opacity 2s ease, transform 2s ease, visibility 2s ease;
    height: 95%;
    width: 95%;
    color: #fff;
    filter: drop-shadow(0 1vh 1vh rgba(0, 0, 0, 0.1));
    flex-direction: column;
    opacity: 0;
    transform: translateY(-20vh);
    visibility: visible;
}

.Main-section.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 2s ease, transform 2s ease, visibility 2s ease;
}

.shownhidden {
    transform: translateY(-20vh);
    opacity: 0;
    visibility: hidden;
    transition: opacity 2s ease, transform 2s ease, visibility 2s ease;
}


#toggleSidebar {
    display: none; /*先隐藏按钮*/

}

#home {
    /* background-color: rgba(255, 255, 255, 0.5); */
    border-radius: 5vh;
    font-size: calc((1vh + 2vw) / 4);
    /* border: #fff solid 0.2vh; */
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 95%;
    width: 95%;
    color: #fff;
    filter: drop-shadow(0 1vh 1vh rgba(0, 0, 0, 0.1));
    visibility: visible;
}

.HomeText1{
    font-size: 4vh;
    font-weight: bolder;
    color: #ffffff;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    justify-content: center;
    align-items: center;
    align-content: center;
    display: flex;
    line-height:300%;
}

.HomeText2{
    font-size: 2vh;
    font-weight: bolder;
    color: #dfdfdf;
    font-family: Arial, Helvetica, sans-serif;
    justify-content: center;
    align-items: center;
    align-content: center;
    display: flex;
    line-height:150%;
}
.HomeText3{
    font-size: 1.5vh;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    justify-content: center;
    align-items: center;
    align-content: center;
    display: flex;
    line-height:150%;
}

.ImageGallery {
    display: flex;
    justify-content: space-around; /* 根据需要调整对齐方式 */
    align-items: center;
}

.HomeImage{
    height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
    opacity: 0.7;
}





/* 简历resume内容 */
#resume {
    /* background-color: rgba(255, 255, 255, 0.068); */
    border-radius: 5vh;
    font-size: calc((1vh + 2vw) / 4);
    /* border:rgba(255, 255, 255, 0.8) solid 0.5vh; */
    display: flex;
    text-align: center;
    justify-content: space-evenly;
    align-items: space-evenly;
    height: 98%;
    width: 95%;
    color: rgba(219, 235, 240, 0.9);
    filter: drop-shadow(0 1vh 1vh rgba(0, 0, 0, 0.1));
    flex-direction: column;
}


#Resume-top{
    height: 97%;
    flex-direction: row;
    display: inline-flex;
}


#left-part {
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    width: 50%;
    /* border:#fff solid 0.5vh; */
    height: 100%;
    text-align: justify;
    justify-content: flex-start;
    margin-right: calc((2vh + 3vw) / 3);
}

#education {
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    /* border:rgba(250, 144, 24, 0.384) solid 0.5vh; */
    height: 45%;
}

#workingexperience {
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    /* border:rgba(24, 65, 250, 0.384) solid 0.5vh; */
    height: 48%;
}

#skills {
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    /* border:rgba(24, 65, 250, 0.384) solid 0.5vh; */
    height: 25%;
}




#right-part {
    margin: 0;
    display: inline-block;
    flex-direction: column;
    width: 50%;
    /* border:#fff solid 0.5vh; */
    height: 100%;
    margin-left: calc((2vh + 3vw) / 3);
    text-align: justify;
    justify-content: flex-start;
}

#EDU-1 {
    height: 2vh;
}
#EDU-1-1{
    height: 2vh;
}
#EDU-1-1-1{
    height: 3vh;
}
#EDU-2{
    height: 2vh;
}
#EDU-2-1{
    height: 2vh;
}
#EDU-2-1-1{
    height: 3vh;
}
#EDU-3{
    height: 2vh;
}
#EDU-3-1{
    height: 2vh;
}
#EDU-3-1-1{
    height: 3vh;
}
#WE-1{
    height:2vh;
}
#WE-1-1{
    height:2vh;
}
#WE-1-1-1{
    height:3vh;
}
#WE-1-1-2{
    height:3vh;
}
#WE-1-2{
    height:2vh;
}
#WE-1-2-1{
    height:4vh;
}
#WE-2{
    height:2vh;
}
#WE-2-1{
    height:2vh;
}
#WE-2-1-1{
    height:2vh;
}
#SKILL1{
    height:2vh;
}
#SKILL2{
    height:2vh;
}
#SKILL3{
    height:2vh;
}
#SKILL4{
    height:2vh;
}
#project-1 {
    height:12vh;
}
#project-1-1{
    height:2vh;
}
#project-1-1-1{
    height:2vh;
}
#project-1-1-1-1{
    height:10vh;
}
#project-2 {
    height: 15vh;
}
#project-2-1{
    height:2vh;
}
#project-2-1-1{
    height:3.5vh;
}
#project-2-1-1-1{
    height:12vh;
}
#project-3 {
    height:15vh;
}
#project-3-1{
    height:2vh;
}
#project-3-1-1{
    height:3.5vh;
}
#project-3-1-1-1{
    height:12vh;
}
#project-4 {
    height:12vh;
}
#project-4-1{
    height:2vh;
}
#project-4-1-1{
    height:2vh;
}
#project-4-1-1-1{
    height:8vh;
}
#project-5 {
    height:15vh;
}
#project-5-1{
    height:2vh;
}
#project-5-1-1{
    height:3.5vh;
}
#project-5-1-1-1{
    height:11vh;
}

/* resume的字体 resume's font size setting */
.Text-Title-1 {
    font-size: calc((4vh + 6vw) / 5);
    font-size: 150%;
    font-weight: bolder;
    color: rgba(255, 254, 232, 0.9);
    text-align: center;
    font-family: 'Segoe UI';
    justify-content: center;
    align-items: center;
    align-content: center;
    display: flex;
    margin: calc((1vh + 1vw) / 6);
    margin-top: calc((1vh + 1vw) / 5);
    padding: 0;
}

.Text-Bold-1 {
    font-size: calc((4vh + 6vw) / 10);
    font-weight: bolder;
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    color:rgba(241, 248, 250, 0.9);
    justify-content: space-between;
    margin: calc((1vh + 1vw) / 5) 0;
    text-underline-offset: 0.5vh;
    flex-direction: column;
}

.Text-Bold-2 {
    font-size: calc((4vh + 6vw) / 12);
    display: flex;
    color:rgba(241, 248, 250, 0.9);
    font-family: Arial, Helvetica, sans-serif;
    justify-content: space-between;
    margin-top: calc((1vh + 1vw) / 5);
    margin-left: calc((1vh + 1vw) / 3);
    margin-right: calc((1vh + 1vw) / 3);
    font-weight: bold;
    width: 100%;
}

.Text-Normal-1 {
    font-size: calc((2vh + 3vw) / 7);
    display: flex;
    color: rgba(219, 235, 240, 0.9);
    font-family: cursive;
    justify-content: space-between;
    margin: calc((1vh + 1vw) / 10) 0;
    margin-left: calc((1vh + 1vw));
    margin-right: calc((1vh + 1vw));
    font-style: italic;

}

#Resume-bottom{
    height: 3%;
    flex-direction: row;
    display: inline-flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}

#resumedownload {
    background-color: transparent; /* 设置背景色为透明 */
    border: none; /* 移除边框 */
    color: rgba(255, 243, 130, 0.8); /* 设置字体颜色 */
    font-family: cursive; /* 设置字体样式 */
    font-size: 1vh; /* 设置字体大小 */
    padding: 1vh; /* 设置内边距 */
    box-shadow: inset 0 0 10px #afafaf; /* 设置内部阴影 */
    cursor: pointer; /* 鼠标悬停时显示手形图标 */
    margin-right: 3vw;
}

#resumedownload:hover {
    background-color: rgba(230, 230, 230, 0.541); /* 鼠标悬停时的背景色，可根据需要调整 */
    color: rgba(15, 15, 15, 0.8); /* 鼠标悬停时的字体颜色 */
}




#portfolio {
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
    /* background-color: rgba(255, 255, 255, 0.5); */
    border-radius: 5vh;
    font-size: calc((1vh + 2vw) / 4);
    /* border: #fff solid 0.5vh; */
    text-align: center;
    justify-content: flex-start;
    align-content: space-evenly;
    gap: 1vh 1vw;
    overflow: auto; /*设定滚动条*/
    align-items: center;
    height: 100%;
    width: 95%;
    color: #fff;
    filter: drop-shadow(0 1vh 1vh rgba(0, 0, 0, 0.1))
}

#portfolio > div {
    display: flex;
    width: 16vw;
    height: 25vh;
    /* border:rgb(50, 50, 150) solid 0.5vh; */
    border-radius: calc(1vh + 1vw);
    position: relative; /* 这使得::before能够相对于#DataDive定位 */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    text-align: center; /* 确保文本内容水平居中 */
    font-size: calc((2vh + 4vw) / 5);
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    color: #fff;
    z-index: 2;
}

#portfolio > div::before {
    content: ""; /* 必须设置，即使没有内容 */
    position: absolute; /* 确保它能够填充#DataDive */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(65, 65, 65, 0.678); /* 半透明灰色覆盖层 */
    z-index: -1; 
    transition: opacity 0.5s ease; /* 添加平滑过渡效果 */
    border-radius: calc(1vh + 1vw);
}

#portfolio > div:hover::before {
    opacity: 0; /* 鼠标悬停时使遮盖层完全透明 */
}

#portfolio > div:hover .PortfolioText{
    opacity: 0.8; /* 鼠标悬停时使文本完全透明 */
    transition: opacity 0.5s ease, transform 0.5s ease, font-size 0.5s ease; /* 添加平滑过渡效果 */
    transform: translateY(-15vh);
    font-size: calc((2vh + 4vw) / 7);
    font-weight: bolder;
    line-height: 120%;
}

.PortfolioText {
    position: absolute;
    width: 80%;
    line-height: 200%;
    opacity: 1;
    transition: opacity 0.5s ease; /* 添加平滑过渡效果 */
}

.PortfolioDetail{
    display: flex;
    opacity:0;
    position: absolute;
    font-size: calc((1vh + 2vw) / 4);
}

#portfolio > div:hover .PortfolioDetail{
    opacity: 0.8; /* 鼠标悬停时使文本完全透明 */
    transition: opacity 0.5s ease, transform 0.5s ease, font-size 0.5s ease; /* 添加平滑过渡效果 */
    transform: translateY(15vh);
    font-weight: normal;
}



#Paper {
    background-image: url(../images/Paper.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    
}

#UrbanDesign{
    background-image: url(../images/UrbanDesign.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}


#DataDive {
    position: relative; /* 这使得::before能够相对于#DataDive定位 */
    background-image: url(../images/DataDive.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}


#NLP{
    background-image: url(../images/FSDS.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

}

#Vancouver{
    background-image: url(../images/Vancouver.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

}

#Urban-Shrinkage{
    background-image: url(../images/UrbanShrinkage.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

#GEE{
    background-image: url(../images/GEE.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

#DOTA2{
    background-image: url(../images/DOTA2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}




#aboutme {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5vh;
    font-size: calc((1vh + 2vw) / 4);
    border: #fff solid 0.5vh;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 95%;
    width: 95%;
    color: #fff;
    filter: drop-shadow(0 1vh 1vh rgba(0, 0, 0, 0.1))
}


/* ----------- 通用超链接样式 ----------- */
a {
    color: inherit;              /* 继承父元素文字颜色 */
    text-decoration: none;       /* 去掉默认下划线 */
  }
  
  a:visited {
    color: inherit;              /* 访问过的链接也继承颜色 */
  }
  
  a:hover {
    text-decoration: underline;  /* 鼠标悬停时加下划线，便于用户识别 */
    opacity: 0.9;                /* 稍微有视觉反馈 */
  }
  
  a:active {
    color: inherit;              /* 点击时保持同色 */
  }
  
  /* ----------- 针对 HomeText2 内的链接，可单独微调 ----------- */
  .HomeText2 a {
    color: #fdf9dd; /* 经典金黄色 */
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .HomeText2 a:hover {
    color: #eef07e; /* 鼠标悬停时更亮一点 */
    text-decoration: underline;
  }
  

/* @media (min-width: 768px) {
    #main-content {
        margin-left: 0; 
}
} */