*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root{
    --bg-img: ;
}

body{
    height: 100vh;
    display: grid;
    place-items: center;
    background-image: var(--bg-img);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.imagem{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    display: none;
}


.container{
    display: grid;
    gap: 12px;
}

.container input{
    font-size: 2rem;
}

.botoes{
    display: flex;
    justify-content: space-evenly;
}

.botoes button{
    font-size: 1.5rem;
    padding: 12px;
}

.animacao{
    animation: slider 12s infinite, fade 12s;
}

@keyframes slider {
    0%, 20% {
        background-image: url(./img/joker.png);
    }
    21%, 40% {
        background-image: url(./img/fighter.png);
    }
    41%, 60% {
        background-image: url(./img/junpei.png);
    }
    61%, 80% {
        background-image: url(./img/makoto.png);
    }
    81%, 100% {
        background-image: url(./img/yutari.png);
    }
}
@keyframes fade {
    0% {
        opacity: 0;
    }
    25%, 50% {
        opacity: 1;
    }
    51%, 75% {
        opacity: 1;
    }
    76%, 99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}