.type-animation {
	width: 100%;
	position: absolute;
	animation: rotateTitle 10s linear infinite ;
}
.type-xxl {
    font-size: 18vw;
    z-index: -1;
    line-height: 0.75;
    letter-spacing: 0.08rem;
    margin: var(--m-large) 0;
}


/* 
.gradient-bg:nth-of-type(3n+1) {
    background-position: 20% 0%;
}

.gradient-bg:nth-of-type(3n+2) {
    background-position: -20% 0%;
}
.gradient-bg:nth-of-type(3n+3) {
    background-position: 0% 0%;
} */


.type-animation:hover {
    animation-play-state: paused;
}
@keyframes rotateTitle {
	0% {
        color: var(--purple);
		transform: rotate3d(0, 1, 0, 0deg);
	}
	25% {
        color: var(--purple);
    }
    25.1% {
        color: rgb(var(--red));;
    }
	50% {
		transform: rotate3d(0, 1, -0.25, 180deg);
	}
    75%{
        color: rgb(var(--red));
    }
    75.1%{
        color: var(--purple);
    }
	100% {
        color: var(--purple);
		transform: rotate3d(0, 1, 0, 360deg);
	}
}