:root {
    --purple: rgb(123, 31, 162);
    --violet: rgb(103, 58, 183);
    --pink: rgb(244, 143, 177);
}

@keyframes background-pan {
    from {
        background-position: 0% center;
    }

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

@keyframes scale {
    from, to {
        transform: scale(0);
    }

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

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

body {
    background-color: rgb(10, 10, 10);
    margin: 0px;
    overflow: hidden;
    display: grid;
    height: 100vh;
    place-items: center;
}

h1 {
    color: white;
    font-family: "Rubik", sans-serif;
    font-size: clamp(4em, 2vw, 6em);
    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);
    animation: scale 700ms ease forwards;
    display: block;
    height: var(--size);
    left: var(--star-left);
    position: absolute;
    top: var(--star-top);
    width: var(--size);
}

h1 > .magic > .magic-star > svg {
    animation: rotate 1000ms linear infinite;
    display: block;
    opacity: 0.7;
}

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

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