html, body {
    background: lch(58.29% 19.86 236.62 / 30% );

    background:hsla (58.29% 19.86 236.62 / 30% );
	background: black;
    
}
.order-page__hero-figure-wrapper {
    position: absolute;
    z-index: 99;
    transform-origin: center;

    animation-delay: .35s;
    top: -10px;
    right: 135px;
    transform-origin: 43% 63%;
		transform-origin: center;
    animation: shapeAppearance 3.5s ease;
    animation-timing-function: ease;
    animation-delay: .35s;
    color:#02b241;



transform-origin: center;
    animation: shapeAppearance 3.5s ease;
    animation-duration: 3.5s;
    animation-timing-function: ease;
    animation-delay: .35s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: shapeAppearance;
    animation-timing-function: ease;
    animation-delay: .35s;
    color: #02b241;
	    animation: rotation 77s linear infinite;

}


@keyframes shapeAppearance {
    0% {
        transform: translateY(20px);
        opacity: 0
    }
}

@keyframes shapeFragmentAppearance {
    0% {
        opacity: 0
    }

    25% {
        opacity: .5
    }

    50% {
        opacity: .25
    }

    75% {
        opacity: .5
    }

    to {
        opacity: 1
    }
}


@keyframes rotation {
    to {
        transform: rotate(1turn)
    }
}

p{
	color: white;
	font-size: 8em;
}