Красивое оформление для текста

Задача

Создание анимированного текста при помощи css и html. Основную роль определяет css с помощью свойства keyframe, которое на протяжении жизненного цикла анимации плавно переключает тени.

HTML

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="index.css">
<head>
    <meta charset="UTF-8">
    <title>Justice IT</title>
</head>
<body>
<div class="container">
    <h1>Justice</h1>
</div>
</body>
</html>

CSS

.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}

h1 {
    text-transform: uppercase;
    color: black;
    margin-top: 200px;
    font: normal 120px Varela Round, sans-serif;
    letter-spacing: 5px;
    text-align: center;
    animation: move linear 2500ms infinite;
    position: absolute;
}

@keyframes move {
    0% {
        text-shadow: 4px -4px 0 hsla(0, 100%, 50%, 1),
        3px -3px 0 hsla(0, 100%, 50%, 1),
        2px -2px 0 hsla(0, 100%, 50%, 1),
        1px -1px 0 hsla(0, 100%, 50%, 1),
        -4px 4px 0 hsla(180, 100%, 50%, 1),
        -3px 3px 0 hsla(180, 100%, 50%, 1),
        -2px 2px 0 hsla(180, 100%, 50%, 1),
        -1px 1px 0 hsla(180, 100%, 50%, 1);
    }
    25% {
        text-shadow: -4px -4px 0 hsla(180, 100%, 50%, 1),
        -3px -3px 0 hsla(180, 100%, 50%, 1),
        -2px -2px 0 hsla(180, 100%, 50%, 1),
        -1px -1px 0 hsla(180, 100%, 50%, 1),
        4px 4px 0 hsla(0, 100%, 50%, 1),
        3px 3px 0 hsla(0, 100%, 50%, 1),
        2px 2px 0 hsla(0, 100%, 50%, 1),
        1px 1px 0 hsla(0, 100%, 50%, 1);
    }
    50% {
        text-shadow: -4px 4px 0 hsla(0, 100%, 50%, 1),
        -3px 3px 0 hsla(0, 100%, 50%, 1),
        -2px 2px 0 hsla(0, 100%, 50%, 1),
        -1px 1px 0 hsla(0, 100%, 50%, 1),
        4px -4px 0 hsla(180, 100%, 50%, 1),
        3px -3px 0 hsla(180, 100%, 50%, 1),
        2px -2px 0 hsla(180, 100%, 50%, 1),
        1px -1px 0 hsla(180, 100%, 50%, 1);
    }
    75% {
        text-shadow: 4px 4px 0 hsla(180, 100%, 50%, 1),
        3px 3px 0 hsla(180, 100%, 50%, 1),
        2px 2px 0 hsla(180, 100%, 50%, 1),
        1px 1px 0 hsla(180, 100%, 50%, 1),
        -4px -4px 0 hsla(0, 100%, 50%, 1),
        -3px -3px 0 hsla(0, 100%, 50%, 1),
        -2px -2px 0 hsla(0, 100%, 50%, 1),
        -1px -1px 0 hsla(0, 100%, 50%, 1);
    }
    100% {
        text-shadow: 4px -4px 0 hsla(0, 100%, 50%, 1),
        3px -3px 0 hsla(0, 100%, 50%, 1),
        2px -2px 0 hsla(0, 100%, 50%, 1),
        1px -1px 0 hsla(0, 100%, 50%, 1),
        -4px 4px 0 hsla(180, 100%, 50%, 1),
        -3px 3px 0 hsla(180, 100%, 50%, 1),
        -2px 2px 0 hsla(180, 100%, 50%, 1),
        -1px 1px 0 hsla(180, 100%, 50%, 1);
    }
}