html,
body {
    user-select: none;
    margin: 0;
    padding: 0;
    font-size: 45px;
    overflow: hidden;
}

.screen {
    /* width: 100vw; */
    height: calc(100vh - 60px);
    /* background-image: url('background.jpg'); background-repeat: repeat; */
}

.screen::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url('background.jpg');
    background-repeat: repeat;
    z-index: -1;
}

.danmu-item {
    overflow: hidden;
    display: inline-block;
    word-break: keep-all;
    white-space: nowrap;
    user-select: none;
    font-weight: 200;
    z-index: 10000000;
}

.__bullet-item-style {
    z-index: 10000;
}

.puyaya {
    height: 10vh;
    z-index: 999;
}

@keyframes animation-before {
    0% {
        clip-path: inset(0 0 0 0);
    }

    100% {
        clip-path: inset(.62em 0 .29em 0);
    }
}

@keyframes animation-after {
    0% {
        clip-path: inset(0 0 0 0);
    }

    100% {
        clip-path: inset(.29em 0 .62em 0);
    }
}

.banner::before {
    content: attr(data-text);
    position: absolute;
    left: -3px;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    ;
    text-shadow: 2px 0 red;
    animation: animation-before 0.3s infinite cubic-bezier(0.77, 0.5, 0.22, 2.2) alternate-reverse;
    font-weight: 200;
}

.banner::after {
    content: attr(data-text);
    position: absolute;
    left: 3px;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    ;
    text-shadow: -2px 0 blue;
    animation: animation-after 0.3s infinite cubic-bezier(0.71, -0.15, 0.33, 2.4) alternate-reverse;
    font-weight: 200;

}

.banner {
    text-align: center;
    background-color: rgba(0, 0, 0, 0);
    width: 100vw;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    font-size: 1.6em;
    font-weight: 200;
    color: #333;
    z-index: 1;
}

@media screen and (max-width: 2000px) {
    .banner {
        font-size: 0.8em;
    }

    .banner::before {
        text-shadow: 1px 0 red;
        left: -2px;
    }

    .banner::after {
        text-shadow: -1px 0 blue;
        left: 2px;
    }

    .top::before {
        height: 150px !important;
        width: 150px !important;
        background-size: contain;
    }

    .top::after {
        position: absolute !important;
        height: 150px !important;
        width: 150px !important;
        background-size: contain;
        bottom: -44px !important;
        right: -40px;
        z-index: 100;
    }
}


.top {
    width: 100vw;
    height: 56px;
    background-image: url('header.png');
    background-repeat: repeat;
    z-index: 1;
}

.top::before {
    content: '';
    position: absolute;
    height: 308px;
    width: 309px;
    top: 60px;
    left: 0;
    background-image: url('background_.jpg');
    background-repeat: no-repeat;
    z-index: 1;
}

.top::after {
    content: '';
    position: absolute;
    height: 213px;
    width: 309px;
    bottom: 6px;
    right: 0;
    background-image: url('background__.jpg');
    background-repeat: no-repeat;
    z-index: 1;
}

.footer {
    width: 100vw;
    height: 60px;
    position: fixed;
    bottom: 0;
    background-image: url('footer.jpg');
    background-repeat: repeat;
    z-index: -100;
}