@import url('./icons.css');
@import url('../spectre/spectre.min.css');
@import url('../spectre/spectre-exp.min.css');
@import url('../spectre/spectre-icon.min.css');
@import url('./animated.css');
@import url('./typecho.css');

:ROOT {
    --coverHeight: 60vh;
}

body,
html {
    overflow-x: hidden;
}

.hello {
    background-color: rgba(0, 0, 0, .03);
    border-radius: 1ex;
    border: solid 1px rgba(0, 0, 0, .08);
    backdrop-filter: blur(20px);
    position: sticky;
    left: 0;
    top: 0;
    width: 400px;
    height: 400px;
}

.headCover {
    /* position: absolute;
    top: 0;
    left: 0; */
    width: 100%;
    height: var(--coverHeight);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 1;
    animation: bgTopToBottom 5s linear infinite;
    box-shadow: 10px 10px 25px 5px rgba(0, 0, 0, .4);
    /* border-bottom-left-radius: 1ex;
    border-bottom-right-radius: 1ex;
    overflow: hidden; */
    border-bottom-right-radius: 6vmax;
    border-top-right-radius: 6vmax;
}

.headCover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--coverHeight);
    /* backdrop-filter: blur(15px); */
    background-color: rgba(255, 255, 255, .2);
}

@keyframes bgTopToBottom {

    /* 0%：初始状态，背景位于顶部（等价于 background-position: top center;） */
    0% {
        background-position: center top;
        /* 明确水平居中、垂直顶部，避免偏移异常 */
    }

    /* 50%：中间状态，背景移动到底部（等价于 background-position: bottom center;） */
    50% {
        background-position: center bottom;
        /* 明确水平居中、垂直底部，保证移动轨迹笔直 */
    }

    /* 100%：结束状态，背景回到顶部，形成来回循环 */
    100% {
        background-position: center top;
    }
}


.headCoverSpace {
    height: var(--coverHeight);
}

.coverTitle {
    padding: 25px;
    max-width: 60vw;
}

.coverTitle>.inner {}

.coverTitle .main,
.coverTitle .sub {
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, .5);
    color: white;
    margin-bottom: 1vw;
    padding: 1vw 2.5vw;
    display: inline-block;
    max-width: 100%;
    border-radius: 3px;
}

.coverTitle .main {
    font-size: 5vmin;
}

.coverTitle .sub {
    font-size: 2vmin;
}

.coverTitle .coverBtn {
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, .8);
    color: #404040;
    display: inline;
    padding: .5vw;
    border-radius: 3px;
    cursor: pointer;
    transition: 300ms;
}

.coverBtn:hover {
    background-color: white;
}

.logo {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 70px;
    right: 20px;
    top: 20px;
    text-align: right;
}

.logo>div {
    color: black;
}

.logo>.main {
    font-size: 3vmin;
}

.logo>.sub {
    font-size: 1.6vmin;
}

.welcome {
    text-align: center;
    margin: calc(50vh - 80px) 0;
    padding: 15px;
}

.welcome>.main {
    font-size: 5vmin;
    color: #606060;
    font-weight: lighter;

}

.welcome>.sub {
    font-size: 2vmin;
    color: #909090;
}

.home_block_title {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: large;
}

.home_bingTitle {
    font-size: 3.5vmax;
    margin: 70px 20px 10px 20px;
    text-align: center;
}

.home_bingSubTitle {
    font-size: 1.5vmax;
    margin: 20px 20px 10px 20px;
    text-align: center;
}

.home_bingInfo {
    font-size: 1vmax;
    margin: 20px;
    text-align: center;
    color: darkgray;
}

.hjBtn {
    background-color: lightsalmon;
    color: white;
    padding: 5px;
    border-radius: 5px;
    display: inline-block;
    box-shadow: 5px 5px 20px 2px rgba(0, 0, 0, .4);
    transition: 300ms;
    cursor: pointer;
    margin: 30px 0;
}

.hjBtn:hover {
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .3);
}

.hjBtn>.main {
    font-weight: bold;
    font-size: large;
}

.hjBtn>.sub {
    color: #606060;
    font-size: small;
}

.web-footer {
    padding: 110px 0;
    /* background-color: #464646; */
    /* color: whitesmoke; */
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .4);
    margin: 0 -15px;
}

.web-footer .main {
    font-size: xx-large;
}

.web-footer .sub {
    color: darkgray;
    font-size: small;
}

.bk2top {
    cursor: pointer;
}

.citem {
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}