@import "./styles.css";


:root{
    --h-title-color:#3948d2;
}

.header {
    border-bottom: solid 2px var(--bs-blue);
    z-index: 10000;
}

.bg-bottom {
    background-color: var(--h-title-color);
}

.top-section {
    position: relative;
    padding: 10rem 0;
    background-position: center;
    background-size: cover;
    height: 25rem;
}

.top-section h2 {
    font-weight: 400;
}

.top-section .top-section-content {
    position: relative;
    z-index: 1;
}

.top-section:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

section header h2{
    font-family: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    color: var(--h-title-color);
    font-size: 2.3rem;
    line-height: 4rem;
}

section .main-body{
    font-size: 1.05rem;
    font-weight: 200;
    line-height: 2.4rem;
}


.bg-gradient-primary-to-secondary-light {
    background: linear-gradient(45deg, #fcfcfc, #ffffff) !important;
}

.bg-gradient-primary-to-secondary-gray {
    background: linear-gradient(45deg, #f0f0f0, #f1f1f1) !important;
}



.on-top {
    position: relative;
    z-index: 10000;
}

.top-bg {
    background-position: center;
    background-size: fill;
    width: 100%;
    height: 100%;
}

.top-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}


#avatar {
    position: relative;
    height: 0;
    top:min(-65px,max(-100px,calc(-1*100vw/12)));
    max-width: 55em;
    margin: 0 1.5rem 0 0;
    float: right;
    z-index: 9000;
}

#avatar img {
    height: max(130px,min(200px,calc(100vw/6)));
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 991px) {
    #avatar {
        margin: 0;
    }
}

/* Section-specific background colors -- 可在 :root 中修改这些变量来自定义每个区块的背景 */
:root{
    --section-bg-home: linear-gradient(45deg, #ffffff, #f7fbff);
    --section-bg-publications: linear-gradient(45deg, #f7fbff, #eef6ff);
    --section-bg-projects: linear-gradient(45deg, #fff7f0, #fff3ea);
    --section-bg-patent: linear-gradient(45deg, #f6fff6, #eefef0);
    --section-bg-awards: linear-gradient(45deg, #fffaf0, #fff5e6);
}

section#home{ background: var(--section-bg-home) !important; }
section#publications{ background: var(--section-bg-publications) !important; }
section#projects{ background: var(--section-bg-projects) !important; }
section#patent{ background: var(--section-bg-patent) !important; }
section#awards{ background: var(--section-bg-awards) !important; }

/* 可选：为每个节增加内边距顶部以避免与固定导航重叠 */
section { padding-top: 3rem; padding-bottom: 3rem; }

/* --------------------------------------------------
     Section-specific typography: line-height & spacing
     可根据需要调整这些数值以获得最佳可读性。
     -------------------------------------------------- */
/* 基础：为每个区块的 main-body 单独设置行高 */
section#home .main-body { line-height: 1.9; }
section#publications .main-body { line-height: 1.6; }
section#projects .main-body { line-height: 1.85; }
section#patent .main-body { line-height: 1.5; }
section#awards .main-body { line-height: 1.6; }

/* 段落与标题间距 */
section .main-body p { margin-bottom: 0.9rem; }
section .main-body h3, section .main-body h4 { margin-top: 1rem; margin-bottom: 0.6rem; }

/* 列表项间距：使论文/专利/项目列表更易于阅读 */
section .main-body ul,
section .main-body ol { margin-top: 0.6rem; margin-bottom: 0.8rem; padding-left: 1.2rem; }
section .main-body li { margin-bottom: 0.45rem; }

/* 小屏自适应：在小屏幕时稍微收紧间距 */
@media screen and (max-width: 767px) {
    section .main-body { line-height: 1.6; }
    section .main-body p { margin-bottom: 0.7rem; }
    section .main-body li { margin-bottom: 0.35rem; }
}