@keyframes x-arrow-horizontal-mover {
    from {
        transform: translate(0, -50%);
    }
    to {
        transform: translate(8px, -50%);
    }
}

@keyframes x-arrow-horizontal-mover-reverse {
    from {
        transform: translate(0, -50%);
    }
    to {
        transform: translate(-8px, -50%);
    }
}

@keyframes x-glow-button {
    from {
        box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #a26d1a, 0 0 70px #a26d1a, 0 0 80px #a26d1a, 0 0 100px #a26d1a, 0 0 150px #a26d1a;
    }

    to {
        box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #a26d1a, 0 0 35px #a26d1a, 0 0 40px #a26d1a, 0 0 50px #a26d1a, 0 0 75px #a26d1a;
    }
}

@keyframes x-glow-button-lv-1 {
    from {
        box-shadow: 0 0 5px #fff,
        0 0 8px #fff,
        0 0 13px #a26d1a,
        0 0 16px #a26d1a,
        0 0 28px #a26d1a,
        0 0 40px #a26d1a;
    }
    to {
        box-shadow: 0 0 2px #fff,
        0 0 5px #fff,
        0 0 10px #a26d1a,
        0 0 8px #a26d1a,
        0 0 14px #a26d1a,
        0 0 20px #a26d1a;
    }
}

@keyframes x-shimmer-keyframe {
    0% {
        background-position: -200px top;
    }
    100% {
        background-position: 200px top;
    }
}

.x-shimmer {
    display: inline-block;
    color: #292524;
    background: #292524 -webkit-gradient(linear, 100% 0, 0 0, from(#292524), color-stop(0.5, #fff), to(#292524));
    background-position: -200px top;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation-name: x-shimmer-keyframe;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.x-btn-play-bg {
    position: relative;
    display: inline-block;
    margin-top: .5rem;
    color: #292524;
    border-radius: 999px;
    animation: 1s x-glow-button-lv-1 infinite alternate, heartbeat 2s ease-in-out infinite both;
}

.x-btn-play-bg .-bg {
    width: 200px;
    height: auto;
}

.x-btn-play-bg .-title-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    font-size: 1.25rem;
    font-weight: 600;
    transform: translate(-50%, -50%);
    /*text-shadow: 2px 1px #fff0c9*/
}

.x-btn-play-bg .-title {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.25rem;
    font-weight: 600;
    transform: translate(-50%, -50%);
    /*text-shadow: 2px 1px #fff0c9*/
}

.x-btn-play-bg .-title-wrapper::before,
.x-btn-play-bg .-title-wrapper::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: .875em;
}

.x-btn-play-bg .-title-wrapper::before {
    content: ">>";
    left: 2rem;
    animation: .375s x-arrow-horizontal-mover infinite alternate;
    /*text-shadow: -3px 0 #fff0c9*/
}

.x-btn-play-bg .-title-wrapper::after {
    content: "<<";
    right: 2rem;
    animation: .375s x-arrow-horizontal-mover-reverse infinite alternate;
    /*text-shadow: 3px 0 #fff0c9*/
}