* {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #000;
            overflow: hidden;
            min-width: 0;
            min-height: 100vh;
        }

        .animation-stage {
            position: fixed;
            top: var(--site-header-height, 64px);
            left: 0;
            width: 100vw;
            height: calc(100vh - var(--site-header-height, 64px) - var(--site-footer-height, 56px));
            overflow: hidden;
            background: #000;
        }

        .animation-content {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 1600px;
            height: 836px;
            transform-origin: center;
            will-change: transform;
        }

        .box {
            transform: rotate3d(0, 0, 0, 0deg);
            transform-origin: 926px 576px;
            transition: transform 5s;
            transform-style: preserve-3d;
        }

        .stars {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            animation: opacity 3s linear infinite;
        }

        @keyframes opacity {
            0% {
                opacity: .9;
            }

            50% {
                opacity: .5;
            }

            100% {
                opacity: .99;
            }
        }

        @keyframes animationColor {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -100% 0;
            }
        }

        span {
            position: absolute;
            left: 100px;
            top: 100px;
            font-size: 32px;
            font-weight: bolder;
            font-family: cursive;
            color: #ccc;
            transition-property: left, top, transform, opacity;
            transition-timing-function: ease;
            -moz-transition-timing-function: ease;
            -webkit-transition-timing-function: ease;
            -o-transition-timing-function: ease;
            transition-duration: 100ms;
        }

        @keyframes show_temp_me {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .heart {
            opacity: 0;
            position: absolute;
            left: 1340px;
            top: 546px;
            font-size: 100px;
            color: #f00;
            text-shadow: 2px 2px 2px #f00;
            z-index: 999;
            transition: opacity 5s;
        }

        .heartBroken {
            filter: blur(0.007em);
        }

        .heartBroken::before,
        .heartBroken::after {
            content: "❤";
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: 50% 80%;
        }

        .heartBroken::before {
            animation: crack1 2.5s linear 1s forwards;
            clip-path: inset(0 50% 0 0);
        }

        .heartBroken::after {
            animation: crack2 1.5s linear 200ms forwards;
            clip-path: inset(0 0 0 50%);
        }

        @keyframes crack1 {
            0% {
                transform: rotateZ(0deg);
            }

            100% {

                transform: rotateZ(-10deg);
            }
        }

        @keyframes crack2 {
            0% {
                transform: rotateZ(0deg);
            }

            100% {
                transform: rotateZ(10deg);
            }
        }

        @keyframes beat {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.2)
            }

            100% {
                transform: scale(1)
            }
        }

        .box>div {
            position: relative;
            transition-property: left, top, opacity;
            transition-duration: 3s;
            transition-timing-function: ease-out;
        }

        span {
            position: absolute;
            left: 100px;
            top: 100px;
            font-size: 22px;
            font-weight: bolder;
            font-family: cursive;
            color: #ccc;
            transition-property: left, top, transform, opacity;
            transition-timing-function: ease;
            -moz-transition-timing-function: ease;
            -webkit-transition-timing-function: ease;
            -o-transition-timing-function: ease;
            transition-duration: 100ms;
        }

        .broken {
            transform: rotateZ(0deg);
            transition-property: transform;
            transition-timing-function: ease;
            -moz-transition-timing-function: ease;
            -webkit-transition-timing-function: ease;
            -o-transition-timing-function: ease;
            transition-duration: 1s;
        }

        #love_left {
            transform-origin: 870px 780px;
        }

        #love_right {
            transform-origin: 870px 730px;
        }

        .text_ta {
            opacity: 0;
            position: relative;
            -webkit-background-clip: text;
            color: transparent;
            font-size: 100px;
            transition-property: top, left, opacity;
            transition-timing-function: ease;
            -moz-transition-timing-function: ease;
            -webkit-transition-timing-function: ease;
            -o-transition-timing-function: ease;
            transition-duration: 2s;
        }

        .arrow {
            width: 222px;
            height: 110px;
            position: absolute;
            top: -300px;
            left: 770px;
            transform: rotateZ(0deg);
            transition-property: top, left, transform;
            transition-duration: 1s;
        }

        .bloods {
            position: absolute;
            left: 34px;
            top: 96px;
            width: 32px;
            height: 32px;
            border-radius: 8px 42px 24px 42px;
            background-color: #d30;
            transform: rotate(45deg);
            transition: top 3s;
        }