* {
    margin: 0;
    padding: 0;
    font-size: 10vw;
    animation: background 5s infinite;
}

body {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

h1 {
    position: relative;
    animation: slide 5s infinite;
}

@keyframes slide {
    0% {
        top: 0;
        right: 0;
        background-color: black;
        color: white;
        border-radius: 5px;
        border: 0.1rem solid white;
        scale: 2;
        rotate: 0deg;
    }
    20% {
        top: -1em;
        right: -3em;
        background-color: yellow;
        color: black;
        border-radius: 20px;
        border: 0.1rem dashed black;
        scale: 1.5;
        rotate: 90deg;
    }
    40% {
        top: 1em;
        right: -3em;
        background-color: lime;
        color: black;
        border-radius: 40px;
        border: 0.1rem dashed black;
        scale: 1.5;
        rotate: 90deg;
    }
    60% {
        top: 1em;
        right: 3em;
        background-color: red;
        color: black;
        border-radius: 60px;
        border: 0.1rem dashed black;
        scale: 1.5;
        rotate: 270deg;
    }
    80% {
        top: -1em;
        right: 3em;
        background-color: blue;
        color: black;
        border-radius: 80px;
        border: 0.1rem dashed black;
        scale: 1.5;
        rotate: 270deg;
    }
    100% {
        top: 0;
        right: 0;
        background-color: black;
        color: white;
        border-radius: 5px;
        border: 0.1rem solid white;
        scale: 2;
        rotate: 360deg;
    }
}

@keyframes background {
    0% {
        background-color: #5f5f5f;
    }
    20% {
        background-color: #62654c;
    }
    40% {
        background-color: #4b614e;
    }
    60% {
        background-color: #5e3c3c;
    }
    80% {
        background-color: #474166;
    }
    100% {
        background-color: #5f5f5f;
    }
}

@media (max-width: 750px) {

    h1 {
        animation: slide-responsive 5s infinite;
    }
    @keyframes slide-responsive {
        0% {
            top: 0;
            right: 0;
            background-color: black;
            color: white;
            border-radius: 5px;
            border: 0.1rem solid white;
            scale: 4;
            rotate: 0deg;
        }
        20% {
            top: -4.5em;
            right: -2.5em;
            background-color: yellow;
            color: black;
            border-radius: 20px;
            border: 0.1rem dashed black;
            scale: 2.5;
            rotate: 90deg;
        }
        40% {
            top: 4.5em;
            right: -2.5em;
            background-color: lime;
            color: black;
            border-radius: 40px;
            border: 0.1rem dashed black;
            scale: 2.5;
            rotate: 90deg;
        }
        60% {
            top: 4.5em;
            right: 2.5em;
            background-color: red;
            color: black;
            border-radius: 60px;
            border: 0.1rem dashed black;
            scale: 2.5;
            rotate: 270deg;
        }
        80% {
            top: -4.5em;
            right: 2.5em;
            background-color: blue;
            color: black;
            border-radius: 80px;
            border: 0.1rem dashed black;
            scale: 2.5;
            rotate: 270deg;
        }
        100% {
            top: 0;
            right: 0;
            background-color: black;
            color: white;
            border-radius: 5px;
            border: 0.1rem solid white;
            scale: 4;
            rotate: 360deg;
        }
    }
}