/* 全局样式 */
* {
    box-sizing: border-box;
}

html {
    background-color: #ffffff;
}

body {
    background-color: #fff;
    margin: 0;
    min-height: 100%;
    font-family: raleway, helvetica neue, sans-serif;
    color: #112f41;
    font-size: 16px;
}
/* 在右边 5% 的位置画竖线 */
.vertical-line {
    position: fixed; /* 固定位置 */
    top: 0;
    right: 5%; /* 距离右边 5% */
    width: 1.77px; /* 竖线宽度 */
    height: 100%; /* 竖线高度，覆盖整个页面 */
    background-color: #112f41; /* 竖线颜色 */
    z-index: 999; /* 确保在页面最上层 */
}
@media (max-width: 767px) {
    body {
        line-height: 1.7em;
    }
}

ul {
    margin-top: -15px;
}

li {
    line-height: 1.5em;
}

p::selection {
    background-color: #eaedf0;
    color: #364049;
}

p {
    display: block;
    font-weight: 400;
    font-size: 1em;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.5em;
    text-align: justify;
}

h1, h2, h3, h4, h5 {
    font-family: montserrat, helvetica neue, sans-serif;
    letter-spacing: .02em;
    margin-bottom: 10px;
    margin-top: 20px;
    line-height: 1.5em;
}

h1 {
    font-size: 36px;
    font-weight: 600;
}

h2 {
    font-size: 30px;
    font-weight: 600;
}

h3 {
    font-size: 24px;
    font-weight: 500;
}

h4 {
    font-size: 20px;
    font-weight: 500;
}

/* 引用样式 */
blockquote {
    margin: 0 5px;
    font-size: 1em;
    line-height: 1.5em;
    text-align: justify;
    font-style: italic;
}

blockquote:before {
    font-family: Georgia, serif;
    content: '\201C';
    position: absolute;
    top: .15em;
    left: -.18em;
    color: #dce0e5;
    font-size: 7em;
    z-index: -1;
    font-style: italic;
}

header, #content {
    height: 100%;
}

figure {
    margin: 0;
}

figure img {
    margin-bottom: 6px !important;
}

figure figcaption p {
    font-size: 14px;
    text-align: center;
}

/* 头部样式 */
header {
    width: 30%;
    background-size: cover;
    background-position: 50% 0;
    position: fixed;
    color: #fcfcfd;
    left: 5%; /* 向右移动5% */
}

header h2 {
    font-size: 36px;
    font-weight: 600;
}

header .menu {
    text-align: left;
}

header .menu p {
    margin-bottom: 0;
}

header .socials {
    padding: 35px 45px;
    bottom: 0;
    position: fixed;
    border: 0;
    max-width: 30%;
}

header .socials .social-link a svg,
header .socials a:visited svg,
header .socials a:focus svg,
header .socials a:active svg {
    fill: #fff;
}

header .socials .social-link a:focus svg,
header .socials a:active svg,
header .socials a:hover svg {
    transition: fill .7s;
    fill: #b9c2cb;
}

header a,
header a:link,
header a:visited {
    color: #fff;
    border-bottom: 0;
    font-weight: 400;
    transition: all .25s;
    line-height: 1.9em;
}

header a:not(.social-link),
header a:link:not(.social-link),
header a:visited:not(.social-link) {
    border-bottom: #fcfcfd 1px dashed;
}

header a:hover,
header a:focus,
header a:active {
    /* 移除颜色变化，使颜色保持不变 */
    /* color: #fd3519; */
    font-size: 1.1em; /* 字体变大 */
    font-family: 'Georgia', serif; /* 更换为您想要的字体 */
    font-weight: 600;
    border-bottom: #fcfcfd 1px dashed;
    padding-bottom: 1px;
}

header .intro {
    padding: 35px 45px;
    position: absolute;
    bottom: 140px;
}

header .rounded-logo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 40px;
    display: block;
    box-shadow: 0 0 5px #112f41;
}

@media (min-width: 768px) and (max-width: 1023px) {
    header {
        width: 40%;
        left: 5%; /* 向右移动5% */
    }
    header .intro {
        bottom: 150px;
    }
    header .socials {
        max-width: 40%;
    }
}

@media (max-width: 767px) {
    header {
        position: relative;
        width: 100%;
        background: #112f41 !important;
        display: block;
        height: auto;
        left: 0; /* 移动端不需要左偏移 */
    }
    header p {
        padding-top: 10px;
    }
    header .socials {
        padding: 0 45px 35px;
        position: relative;
        max-width: inherit;
    }
    header .rounded-logo {
        text-align: center;
        margin: 0 auto;
    }
    header .intro {
        bottom: inherit;
        display: block;
        position: relative;
    }
}

/* 内容和面包屑导航 */
#content, .breadcrumb {
    max-width: 35em;
    margin: 0 auto;
    display: block;
}

/* 链接样式 */
a {
    line-height: 1.6em;
}

a, a:visited, a:link {
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    border-bottom: #8494a4 1px dashed;
    padding-bottom: 1px;
    transition: all 0.2s ease-in-out;
}

a svg, a:visited svg, a:link svg {
    fill: inherit;
    transition: all 0.2s ease-in-out;
}

/* 移除之前的悬停变红色的样式 */
/* a:hover, a:focus, a:active {
    color: #fd3519;
} */

/* 新的悬停和点击样式 */
a:hover, a:focus, a:active {
    /* 保持颜色不变 */
    /* color: inherit; */ /* 可以不写，默认继承 */
    font-size: 1.1em; /* 字体增大 */
    font-family: 'Georgia', serif; /* 更换字体 */
    font-weight: 600;
    border-bottom: #8494a4 1px dashed;
    padding-bottom: 1px;
}

a:hover svg, a:focus svg, a:active svg {
    /* 保持SVG图标颜色不变 */
    /* fill: inherit; */ /* 可以不写，默认继承 */
}

/* 内容区域样式 */
.content-wrapper {
    padding: 35px 45px;
    position: static;
    width: 65%;       /* 调整后的宽度 */
    margin-left: 35%; /* 调整后的左外边距 */
    float: none;
    clear: none;
    display: block;
    min-height: 88vh;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .content-wrapper {
        width: 55%;       /* 调整后的宽度 */
        margin-left: 45%; /* 调整后的左外边距 */
    }
}

@media (max-width: 767px) {
    .content-wrapper {
        position: relative;
        width: 100%;
        margin-left: 0;
    }
}

/* 页脚样式 */
footer {
    position: absolute;
    width: 65%;   /* 调整后的宽度 */
    left: 35%;    /* 调整后的左偏移 */
    background-color: #112f41;
    color: #fcfcfd;
    padding: 35px 45px;
}

footer .footer-wrapper {
    max-width: 35em;
    margin: 0 auto;
    display: block;
}

@media (min-width: 768px) and (max-width: 1023px) {
    footer {
        width: 55%;   /* 调整后的宽度 */
        left: 45%;    /* 调整后的左偏移 */
    }
}

@media (max-width: 767px) {
    footer {
        position: relative;
        width: 100%;
        left: 0;
    }
}

footer p {
    margin-bottom: 0;
}

/* 图像样式 */
img.gopher {
    margin: 0 auto 30px !important;
    max-width: 200px;
}

.small {
    font-size: 13px;
}

.active {
    font-weight: 500;
}

/* 图标样式 */
#content .icon, header .icon {
    margin-right: 5px;
    display: inline-block;
}

#content .icon svg, header .icon svg {
    width: auto;
}

header .icon {
    fill: #fff;
    margin-right: 10px;
}

#content .icon {
    fill: #112f41;
}

#content:not(.portfolio) img {
    width: 110%;
    display: block;
    margin: 0 -5%;
}

.published-date, .reading-time {
    display: inline-block;
    margin-bottom: 20px;
}

.reading-time {
    margin-right: 20px;
}

.img-caption {
    margin-bottom: 5px !important;
}

/* 作品集样式 */
.portfolio img {
    max-width: 100%;
    margin-bottom: 30px;
    box-shadow: 0 0 5px #112f41;
}

.portfolio .rounded-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.portfolio .testimonial-list {
    margin: 0 auto;
    display: flex;
}

.portfolio .testimonial-list .testimonial-container {
    display: inline-block;
    text-align: center;
}

.portfolio .testimonial-list .testimonial-container .testimonial-name,
.portfolio .testimonial-list .testimonial-container .testimonial-role {
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    margin-top: -20px;
}

.portfolio .testimonial-list .testimonial-container .testimonial-role {
    font-weight: 400;
}

.portfolio .testimonial-list .testimonial-container .testimonial-text {
    position: relative;
    z-index: 0;
}

.portfolio .portfolio-tags {
    margin-top: 6px;
}

.portfolio .portfolio-tags span {
    font-weight: 600;
}

.portfolio .portfolio-tags a {
    overflow-wrap: break-word;
}

.portfolio .tags {
    margin-bottom: 10px;
}

#content .portfolio-list h2 {
    margin: 0;
}

#content .portfolio-list a,
#content .portfolio-list a:hover,
#content .portfolio-list a:link,
#content .portfolio-list a:active,
#content .portfolio-list a:visited,
#content .portfolio-list a:focus {
    border-bottom: none;
    color: inherit;
}

#content .portfolio-list img {
    max-width: 100%;
    border-radius: 2px;
    display: block;
    box-shadow: 0 0 5px #112f41;
    margin: inherit;
}

#content .portfolio-list .portfolio-container {
    position: relative;
    max-width: 35em;
    margin-bottom: 30px;
}

#content .portfolio-list .portfolio-container .portfolio-details {
    opacity: 0;
    display: none;
    width: 100%;
    padding: 2em 1em;
    color: #f6eb0f;
    transition: opacity .4s ease;
}

#content .portfolio-list .portfolio-container .portfolio-details p,
#content .portfolio-list .portfolio-container .portfolio-details h2 {
    text-align: center;
    margin-bottom: 0;
    position: relative;
}

#content .portfolio-list .portfolio-container .img-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .4s ease;
    background-color: #112f41;
}

#content .portfolio-list .portfolio-container:hover .img-overlay {
    opacity: .7;
}

#content .portfolio-list .portfolio-container:hover .portfolio-details {
    opacity: 1;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#content .portfolio-list img::hover {
    linear-gradient: #112f41, #112f41;
}

@media (max-width: 767px) {
    #content .portfolio-list .portfolio-container img {
        margin-bottom: 0;
    }
    #content .portfolio-list .portfolio-container .img-overlay {
        display: none;
    }
    #content .portfolio-list .portfolio-container .portfolio-details {
        display: block;
        opacity: 1;
        width: 100%;
        padding: 0;
        color: #364049;
    }
    #content .portfolio-list .portfolio-container .portfolio-details h2 {
        font-size: 24px;
        line-height: 1.5em;
    }
    #content .portfolio-list .portfolio-container .portfolio-details h2 span {
        background-image: linear-gradient(180deg, transparent 60%, #F6EB0F 0);
        padding: 0 .2em;
    }
    #content .portfolio-list .portfolio-container .portfolio-details p,
    #content .portfolio-list .portfolio-container .portfolio-details h2 {
        text-align: center;
        margin-bottom: 0;
        position: relative;
    }
    #content .portfolio-list .portfolio-container:hover .portfolio-details {
        transform: none;
        position: relative;
        left: 0;
    }
}

.designs, .techs {
    display: inline-block;
}

.designs {
    margin-right: 20px;
}

.read-more {
    margin-top: -10px;
    text-align: right;
    display: block;
}

.chroma {
    padding: 10px;
}