:root {
    --purple: rgb(123, 31, 162);
    --violet: rgb(103, 58, 183);
    --pink: rgb(244, 143, 177);
}
/* animation frames for moving gradient */
@keyframes background-pan {
    from {
        background-position: 0% center;
    }

    to {
        background-position: -200% center;
    }
}

/* animate the stars */
@keyframes scale {
    from, to {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(180deg);
    }
}

h1 {
    color: white;
    font-size: clamp(2em, 4vw, 4em);
    font-weight: 400;
    margin: 0px;
    padding: 20px;
    text-align: center;
}

    h1 > .magic {
        display: inline-block;
        position: relative;
    }

        h1 > .magic > .magic-star {
            --size: clamp(20px, 1.5vw, 30px);
            display: block;
            height: var(--size);
            left: var(--star-left);
            position: absolute;
            top: var(--star-top);
            width: var(--size);
            /* animate the stars */
            animation: scale 700ms ease forwards;
        }

            h1 > .magic > .magic-star > svg {
                /* animate the rotation of the stars */
                animation: rotate 1000ms linear infinite;
                display: block;
                opacity: 0.7;
            }

                h1 > .magic > .magic-star > svg > path {
                    fill: var(--violet);
                }

        h1 > .magic > .magic-text {
            background: linear-gradient( to right, var(--purple), var(--violet), var(--pink), var(--purple) );
            /* for animating the text color */
            animation: background-pan 3s linear infinite;
            background-size: 200%;
            /* make the text have gradient color */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            white-space: nowrap;
        }