@font-face {
    font-family: "MV Boil";
    src: url(./MVBoil.ttf);
}

* {
    margin: 0;
    padding: 0;
}

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

.bg {
    /* https://s11.ax1x.com/2024/02/17/pFJZka4.jpg */
    background: url(bg.webp) no-repeat center center fixed;
    /* 与下面的mainbox:before中的background设置一样 */
    width: 100%;
    height: 100%;
}

.mainbox {
    z-index: 0;
    /* 为不影响内容显示必须为最高层 */
    position: absolute;
    overflow: hidden;
}

.mainbox:before {
    content: "";
    /* 必须包括 */
    position: absolute;
    /* 固定模糊层位置 */
    width: 300%;
    height: 300%;
    left: -100%;
    /* 回调模糊层位置 */
    top: -100%;
    /* 回调模糊层位置 */
    background: url(bg.webp) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /* 与上面的bg中的background设置一样 */
    z-index: -2;
    /* 模糊层在最下面 */
}

.bottom {
    width: 100%;
    height: 95%;
    display: flex;
    /*使用flex盒子*/
    justify-content: center;
    /*水平轴上居中*/
    align-items: flex-end;
    color: rgb(4, 184, 255);
    font-size: 1.2rem;
    font-weight: bold;
    z-index: 1;
}

.hitokoto_from {
    width: 100%;
    height: 80%;
    display: flex;
    /*使用flex盒子*/
    justify-content: center;
    /*水平轴上居中*/
    align-items: flex-end;
    margin-left: 15rem;
    z-index: 2;
}

.hitokoto {
    width: 100%;
    height: 75%;
    display: flex;
    /*使用flex盒子*/
    justify-content: center;
    /*水平轴上居中*/
    align-items: flex-end;
    z-index: 3;
}

.botton_frame {
    width: 100%;
    height: 60%;
    display: flex;
    /*使用flex盒子*/
    justify-content: center;
    /*水平轴上居中*/
    align-items: flex-end;
    z-index: 4;
}

.content_text {
    width: 100%;
    height: 35%;
    display: flex;
    /*使用flex盒子*/
    justify-content: center;
    /*水平轴上居中*/
    align-items: flex-end;
    font-size: 3.5rem;
    font-family: "MV Boil";
    color: rgba(255, 255, 255);
    font-weight: bolder;
    z-index: 6;
}

.content_text_0 {
    width: 100%;
    height: 45%;
    display: flex;
    /*使用flex盒子*/
    justify-content: center;
    /*水平轴上居中*/
    align-items: flex-end;
    font-size: 3.5rem;
    font-family: "MV Boil";
    color: rgba(255, 255, 255);
    font-weight: bolder;
    z-index: 6;
}

.content_text_1 {
    width: 100%;
    height: 47%;
    display: flex;
    /*使用flex盒子*/
    justify-content: center;
    /*水平轴上居中*/
    align-items: flex-end;
    font-size: 2.3rem;
    font-family: "Microsoft YaHei";
    color: rgba(255, 255, 255);
    font-weight: lighter;
    z-index: 5;
}

article {
    width: 100%;
    height: 100%;
    margin: auto auto;
}