*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root{
    --bg-img: ;
}
body{
    display: grid;
    place-content: center;
    height: 100vh;
    background-image: var(--bg-img);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.container{
    display: grid;
    gap: 40px;
}
.container input{
    text-align: center;
    font-size: 2rem;
}
.butoes{
    display: flex;
    justify-content: space-evenly;
}
.butoes button{
    font-size: 2rem;
}
.animacao{
    animation: slider 12s infinite, fade 4s;
}

@keyframes slider{
    0%, 20%{
        background-image: url(./img/dolly.jpg);
    }
    21%, 40%{
        background-image: url(./img/minerinho.jpg);
    }
    41%, 60%{
        background-image: url(./img/pepsi.jpg);
    }
    61%, 80%{
        background-image: url(./img/tony.jpg);
    }
    81%, 85%{
        background-image: url(./img/Barriguinha-mole.png.webp);
    }
    86%, 100%{
        background-image: url(./img/uso.jpg);
    }
}

@keyframes fade{
    0% {
        opacity: 0;
    }
    25%, 50% {
        opacity: 1;
    }
    51%, 75% {
        opacity: 1;
    }
    75%, 99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}