html,
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #FDA7DF;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#characters>img {
    margin: -9px;
}

#claire {
    animation: sprint-ahead 5s cubic-bezier(0.1, -0.6, 0.2, 0) 0.2s infinite normal forwards;
}

#jan {
    animation: sprint-ahead 5s cubic-bezier(0.1, -0.6, 0.2, 0) 0s infinite normal forwards;
    animation-delay: 250ms;
}

@keyframes sprint-ahead {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(0px);
    }
}

#characters {
    z-index: 10;
}

#road {
    position: absolute;
    background-image: url('../images/road.png');
    min-width: 80px;
    height: 200%;
    background-repeat: repeat-y;
    overflow: hidden;
    background-size: 100%;
    animation: road-animation 10s linear infinite;
    box-shadow: 0 0 8px 8px #FDA7DF inset;
}

:root {
    --scroll-start: 0px;
    --scroll-end: -80px;
}

@keyframes road-animation {
    from {
        transform: translateY(var(--scroll-start));
    }

    to {
        transform: translateY(var(--scroll-end));
    }
}