* {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

body {
    background: #394146;
}

.lore {
    padding-top: 20px;
    color: #fff;
    font-size: 1.5rem;
    text-align: center;
    padding-bottom: 20px;
}

.reset-div {
    text-align: center;
}

#game {
    width: 700px;
    height: 350px;
    border: 1px solid black;
    border-radius: 5px;
    background: #273036;
}

#chisato {
    position: relative;
    width: 20px;
    height: 50px;
    top: 190px;
/*     animation: chisato-jump 500ms infinite; */
}

.animate {
    animation: chisato-jump 500ms infinite;
}

#bullet {
    position: relative;
    top: 250px;
    left: 630px;
    width: 20px;
    height: 20px;
/*     animation: bullet 1s infinite linear; */
}

.animate-bullet {
    animation: bullet 1s infinite linear;
}

@keyframes chisato-jump {
    0%{top: 190px;}
    30%{top: 140px;}
    70%{top: 140px;}
    100%{top:190px;}
}

@keyframes bullet {
    0%{left:630px;}
    100%{left:-40px;}
}


/* INTENTO DE ANIMACION DE SPRITE */

.saludo {
    height: 216px;
    width: 98px;
    background: url(img-pages/Saludando.png);
    margin: 0 auto;
    margin-top: 20px;
    animation: saludar 1s steps(13) infinite;
}


@keyframes saludar{
    0%{
        background-position: 0px;
    }
    100%{
        background-position: -1280px;
    }
}

.despedida {
    color: #fff;
    text-align: center;
}

.footer-about {
    display: flex;
    height: 10vh;
    width: 100%;
    background: #273036;
}

.footer-about .footer-content {
    display: flex;
}

.links {
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
}