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

:root{
    --imagem-1:url(./img/Breloom.png);
    --imagem-2:url(./img/Cooking.gif);
    --imagem-3:url(./img/Green-princess.png);
    --imagem-4:url(./img/JKM3-Atomic-Kitties.png);
    --imagem-5:url(./img/Lara.jpg);
    --imagem-6:url(./img/Latte-Camomille.png);
    --imagem-7:url(./img/Potionomics-Luna.png);
    --imagem-8:url(./img/Space-Dragon.png);
    --imagem-9:url(./img/Terraria-Halloween.png);
    --imagem-10:url(./img/Watermelon.png);
    --selected-image: var(--imagem-1);
}

body{
    height: 100vh;
    display: grid;
    place-content: center;
    transition: 0.5s;
}

#mainframe{
    background-image: var(--selected-image);
    background-size: cover;
}

.container{
    display: grid;
    grid-template-columns: 1;
    grid-template-rows: 2;
    gap: 40px;
}

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

.buttons{
    display: flex;
    place-content: center;
    gap: 80px;
}

button{
    padding:15px;
    font-size: 2rem;
}

.animado{
    animation: autoSlider 40s infinite;
}

@keyframes autoSlider {
    0%, 9% {
        background-image: var(--imagem-1);

    }
    10%, 19% {
        background-image: var(--imagem-2);

    }
    20%, 29% {
        background-image: var(--imagem-3);

    }
    30%, 39% {
        background-image: var(--imagem-4);

    }
    40%, 49% {
        background-image: var(--imagem-5);

    }
    50%, 59% {
        background-image: var(--imagem-6);

    }
    60%, 69% {
        background-image: var(--imagem-7);

    }
    70%, 79% {
        background-image: var(--imagem-8);

    }
    80%, 89% {
        background-image: var(--imagem-9);

    }
    90%, 99% {
        background-image: var(--imagem-10);

    }
}