/* =========================
   基础
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html,
body {

    width: 100%;
    min-height: 100%;

}



body {

    color: #fff;

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;


    background-image:

    linear-gradient(
        rgba(0,0,0,.11),
        rgba(0,0,0,.11)
    ),

    url("images/bg.jpg");



    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;


    animation:
    bgMove 30s ease-in-out infinite alternate;

}



/* =========================
   页面
========================= */


.page {

    min-height: 100vh;

    display: flex;

    flex-direction: column;


    padding:

    12vh
    8vw
    5vh;


    animation:

    fadeIn 1.2s ease forwards;

}



.content {

    max-width: 420px;

}



/* =========================
   名字
========================= */


h1 {

    font-size: 34px;

    font-weight: 500;

    letter-spacing: 5px;

    margin-bottom: 12px;

}



.slogan {

    font-size: 15px;

    letter-spacing: 1px;

    opacity: .75;

}



/* =========================
   图标
========================= */


.social {

    display: flex;

    gap: 30px;

    margin-top: 45px;


    animation:

    fadeUp .8s ease .3s both;

}



.social a {

    color: #fff;

    font-size: 23px;

    opacity: .75;


    text-decoration: none;


    transition:

    .3s ease;

}



.social a:hover {

    opacity: 1;

    transform:

    translateY(-3px);

}



/* =========================
   About
========================= */


.about {

    margin-top: 65px;


    animation:

    fadeUp .8s ease .6s both;

}



.about h2 {

    font-size: 15px;

    font-weight: 400;

    letter-spacing: 2px;

    margin-bottom: 18px;

}



.about p {

    font-size: 14px;

    line-height: 2;

    opacity: .8;

}



/* =========================
   底部
========================= */


footer {

    margin-top: auto;

    padding-top: 45px;


    animation:

    fadeUp .8s ease .9s both;

}






.status {

    font-size:13px;

    line-height:1.8;

    opacity:.75;

    letter-spacing:1px;

}


.time-block {

    margin-bottom:18px;

}


.time-block span {

    display:block;

    font-size:12px;

    opacity:.65;

}


.time-block p {

    margin-top:3px;

    font-size:14px;

}


.copyright {

    margin-top: 12px;

    font-size: 13px;

    opacity: .65;

}



/* =========================
   动画
========================= */


@keyframes fadeIn {


    from {

        opacity: 0;

    }


    to {

        opacity: 1;

    }

}



@keyframes fadeUp {


    from {

        opacity: 0;

        transform:

        translateY(15px);

    }


    to {

        opacity: 1;

        transform:

        translateY(0);

    }

}



@keyframes bgMove {


    from {

        background-position:

        center center;

    }


    to {

        background-position:

        52% 48%;

    }

}



/* =========================
   手机/竖屏适配
========================= */


@media (max-width: 768px) {


    body {

        background-size:

        auto 100%;


        background-position:

        center center;

    }



    .page {

        padding:

        10vh
        8vw
        5vh;

    }


    h1 {

        font-size: 30px;

    }


}



/* 小屏手机 */

@media (max-width: 430px) {


    body {

        background-size:

        auto 100%;


        background-position:

        55