*                                       { margin:0px;padding:0px;list-style:none;box-sizing:border-box;user-select:none; }

@keyframes rotating {
    from {
        left:0px;top:0px;transform:rotate(0deg);
    }  
    50% {        
        top:20vh;left:20vh;
    }
    to {
        top:-20vh;left:-20vh;
        transform:rotate(360deg);
    }
}


html                                    { font-size:20px; }
body                                    { display:flex;flex-direction:column;gap:0px;justify-content:center;align-items:center;height:100vh;background:radial-gradient(circle,rgba(63,94,251,1) 0%,rgba(252,70,107,1) 100%);color:#fff;overflow:hidden; }

.overlay                                { width:200vw;height:200vh;transform-origin:center center;position:absolute;left:0px;top:0px;z-index:2; }
.overlay#difference                     { animation:rotating 10s ease-in-out 0ms infinite alternate both;mix-blend-mode:difference;filter:blur(500px);background:rgb(0,0,0);background:radial-gradient(circle,rgba(0,0,0,1) 0%,rgba(255,255,255,1) 100%); }
.overlay#color                          { animation:rotating 5s ease-in-out 3ms infinite alternate both;mix-blend-mode:color;filter:blur(500px);background:rgb(0,0,0);background:rgb(131,58,180);background:linear-gradient(90deg, rgba(131,58,180,1) 0%,rgba(253,29,29,1) 50%,rgba(252,176,69,1) 100%); }

.rotatortext                            { --amount-of-characters:11;position:relative;line-height:10rem;overflow:hidden;z-index:3; }
.rotatortext>*:first-child              { text-transform:uppercase;display:flex;font-family:"Titan One",Arial, Helvetica, sans-serif;-webkit-text-stroke: 1px #fff;color:transparent;font-size:6rem; }
.rotatortext>*:last-child               { display:flex;position:absolute;left:0px;bottom:0px;font-family:"Damion",Arial, Helvetica, sans-serif;font-size:8rem; }
.rotatortext:nth-child(2)               { padding:0px 75px;}

.rotatortext span                       { transition:transform ease-in-out 150ms;display:block; }

.rotatortext>*:first-child span         { transform:translate(0px,0px); }
.rotatortext>*:last-child span          { transform-origin:center center;transform:translate3d(0px,41.9998px,41.9998px) rotate(16.6993deg) rotateY(16.6993deg) rotateX(90deg); }

.rotatortext:hover *:first-child span   { transform:translate3d(0px, -39.1997px, 39.1997px) rotate(16.6993deg) rotateY(-16.6993deg) rotateX(-90deg); }
.rotatortext:hover *:last-child span    { transform:translate(0px,0px); }

.rotatortext:hover *:first-child span:nth-child(1)         { transition-delay:0ms; }
.rotatortext:hover *:first-child span:nth-child(2)         { transition-delay:30ms; }
.rotatortext:hover *:first-child span:nth-child(3)         { transition-delay:60ms; }
.rotatortext:hover *:first-child span:nth-child(4)         { transition-delay:90ms; }
.rotatortext:hover *:first-child span:nth-child(5)         { transition-delay:120ms; }
.rotatortext:hover *:first-child span:nth-child(6)         { transition-delay:150ms; }
.rotatortext:hover *:first-child span:nth-child(7)         { transition-delay:180ms; }
.rotatortext:hover *:first-child span:nth-child(8)         { transition-delay:210ms; }
.rotatortext:hover *:first-child span:nth-child(9)         { transition-delay:240ms; }
.rotatortext:hover *:first-child span:nth-child(10)        { transition-delay:270ms; }
.rotatortext:hover *:first-child span:nth-child(11)        { transition-delay:300ms; }
.rotatortext:hover *:first-child span:nth-child(12)        { transition-delay:330ms; }
.rotatortext:hover *:first-child span:nth-child(13)        { transition-delay:360ms; }
.rotatortext:hover *:first-child span:nth-child(14)        { transition-delay:390ms; }
.rotatortext:hover *:first-child span:nth-child(15)        { transition-delay:420ms; }
.rotatortext:hover *:last-child span:nth-child(1)          { transition-delay:150ms; }
.rotatortext:hover *:last-child span:nth-child(2)          { transition-delay:180ms; }
.rotatortext:hover *:last-child span:nth-child(3)          { transition-delay:210ms; }
.rotatortext:hover *:last-child span:nth-child(4)          { transition-delay:240ms; }
.rotatortext:hover *:last-child span:nth-child(5)          { transition-delay:270ms; }
.rotatortext:hover *:last-child span:nth-child(6)          { transition-delay:300ms; }
.rotatortext:hover *:last-child span:nth-child(7)          { transition-delay:330ms; }
.rotatortext:hover *:last-child span:nth-child(8)          { transition-delay:360ms; }
.rotatortext:hover *:last-child span:nth-child(9)          { transition-delay:390ms; }
.rotatortext:hover *:last-child span:nth-child(10)         { transition-delay:420ms; }
.rotatortext:hover *:last-child span:nth-child(11)         { transition-delay:450ms; }
.rotatortext:hover *:last-child span:nth-child(12)         { transition-delay:480ms; }
.rotatortext:hover *:last-child span:nth-child(13)         { transition-delay:510ms; }
.rotatortext:hover *:last-child span:nth-child(14)         { transition-delay:540ms; }
.rotatortext:hover *:last-child span:nth-child(15)         { transition-delay:570ms; }

.rotatortext *:last-child span:nth-child(15)               { transition-delay:calc((var(--amount-of-characters) * 30ms) - 450ms); }
.rotatortext *:last-child span:nth-child(14)               { transition-delay:calc((var(--amount-of-characters) * 30ms) - 420ms); }
.rotatortext *:last-child span:nth-child(13)               { transition-delay:calc((var(--amount-of-characters) * 30ms) - 390ms); }
.rotatortext *:last-child span:nth-child(12)               { transition-delay:calc((var(--amount-of-characters) * 30ms) - 360ms); }
.rotatortext *:last-child span:nth-child(11)               { transition-delay:calc((var(--amount-of-characters) * 30ms) - 330ms); }
.rotatortext *:last-child span:nth-child(10)               { transition-delay:calc((var(--amount-of-characters) * 30ms) - 300ms); }
.rotatortext *:last-child span:nth-child(9)                { transition-delay:calc((var(--amount-of-characters) * 30ms) - 270ms); }
.rotatortext *:last-child span:nth-child(8)                { transition-delay:calc((var(--amount-of-characters) * 30ms) - 240ms); }
.rotatortext *:last-child span:nth-child(7)                { transition-delay:calc((var(--amount-of-characters) * 30ms) - 210ms); }
.rotatortext *:last-child span:nth-child(6)                { transition-delay:calc((var(--amount-of-characters) * 30ms) - 180ms); }
.rotatortext *:last-child span:nth-child(5)                { transition-delay:calc((var(--amount-of-characters) * 30ms) - 150ms); }
.rotatortext *:last-child span:nth-child(4)                { transition-delay:calc((var(--amount-of-characters) * 30ms) - 120ms); }
.rotatortext *:last-child span:nth-child(3)                { transition-delay:calc((var(--amount-of-characters) * 30ms) - 90ms); }
.rotatortext *:last-child span:nth-child(2)                { transition-delay:calc((var(--amount-of-characters) * 30ms) - 60ms); }
.rotatortext *:last-child span:nth-child(1)                { transition-delay:calc((var(--amount-of-characters) * 30ms) - 30ms); }
.rotatortext *:first-child span:nth-child(15)              { transition-delay:calc((var(--amount-of-characters) * 30ms) - 300ms); }
.rotatortext *:first-child span:nth-child(14)              { transition-delay:calc((var(--amount-of-characters) * 30ms) - 270ms); }
.rotatortext *:first-child span:nth-child(13)              { transition-delay:calc((var(--amount-of-characters) * 30ms) - 240ms); }
.rotatortext *:first-child span:nth-child(12)              { transition-delay:calc((var(--amount-of-characters) * 30ms) - 210ms); }
.rotatortext *:first-child span:nth-child(11)              { transition-delay:calc((var(--amount-of-characters) * 30ms) - 180ms); }
.rotatortext *:first-child span:nth-child(10)              { transition-delay:calc((var(--amount-of-characters) * 30ms) - 150ms); }
.rotatortext *:first-child span:nth-child(9)               { transition-delay:calc((var(--amount-of-characters) * 30ms) - 120ms); }
.rotatortext *:first-child span:nth-child(8)               { transition-delay:calc((var(--amount-of-characters) * 30ms) - 90ms); }
.rotatortext *:first-child span:nth-child(7)               { transition-delay:calc((var(--amount-of-characters) * 30ms) - 60ms); }
.rotatortext *:first-child span:nth-child(6)               { transition-delay:calc((var(--amount-of-characters) * 30ms) - 30ms); }
.rotatortext *:first-child span:nth-child(5)               { transition-delay:calc((var(--amount-of-characters) * 30ms) - 0ms); }
.rotatortext *:first-child span:nth-child(4)               { transition-delay:calc((var(--amount-of-characters) * 30ms) + 30ms); }
.rotatortext *:first-child span:nth-child(3)               { transition-delay:calc((var(--amount-of-characters) * 30ms) + 60ms); }
.rotatortext *:first-child span:nth-child(2)               { transition-delay:calc((var(--amount-of-characters) * 30ms) + 90ms); }
.rotatortext *:first-child span:nth-child(1)               { transition-delay:calc((var(--amount-of-characters) * 30ms) + 120ms); }