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

html,
body {
    height: 100%;
    font-family: 'bxzlzt';
    background-image: url('images/img_sky.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    overflow: auto;
    overflow-x: hidden;
    user-select: none;
}

section {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}


#interface {
    position: relative;
    text-align: center;
    z-index: 3;
    height: 100%;
    width: 100%;
    padding: 3px 13px;
}

/* 名字展示 */
#nameDisplay {
    color: #ffffff;
    display: block;
    text-align: center;
    font-size: 19vw;
    font-family: 'yfjlxs';
    overflow: hidden;
    white-space: nowrap;
}

button {
    display: flex;
    /* 使用Flexbox */
    margin: auto;
    /* 水平居中 */
    justify-content: center;
    align-items: center;
    width: 49vw;
    height: 25vh;
    border: 0;
    font-family: 'bxzlzt';
    background-image: linear-gradient(to right, #ff9bab 0%, #FFC0CB 51%, #ff9bab 100%);
    background-size: 200% auto;
    border-radius: 8px;
    color: #fbff21;
    outline: none;
    cursor: pointer;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .1);
    transition: ease .1s;
    font-size: 10vw;
    -webkit-tap-highlight-color: transparent;
}

button:hover {
    background-position: right center;
    color: #E6F1ED;
    text-decoration: none;
}

/* 针对竖屏幕设备的样式调整 */
@media screen and (orientation: portrait) {

    button {
        border-radius: 666px;
        width: 87vw;
        height: 19.99vh;
        font-size: 12.11vw;
    }

    #nameDisplay {
        font-size: 29vw;
    }

}