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

:root {
    --cor-primaria: #4B0082; /* Indigo */
    --cor-secundaria: #6A0DC3; /* Purple */
    --cor-terciaria: #8A2BE2; /* Blue Violet */
    --neutro: #2E2E2E; /* Dark Gray */
    --preto: #0C0C0C; /* Very Dark Gray */
    --branco: #fafafa;
    --fonte-titulo: "Cinzel", serif; /* Clássico e elegante */
    --fonte-texto: "Montserrat", sans-serif; /* Limpo e moderno */
    --degrade-fantasia: linear-gradient(180deg, #1E1E78 0%, #4B0082 100%); /* Dark Blue to Indigo */
}
body {
    background: var(--degrade-fantasia);
    background-repeat: no-repeat;
    height: 100vh;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

main {
    margin-top: 10%;
    color: var(--branco);
    background-color: var(--neutro);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: start;

    width: 75%;
    gap: 1rem;


    border-radius: 16px;
}
footer{
    margin-top: 1%;
    display: flex;
    align-items: center;

    color: var(--branco);

    gap: 8px;

    font-weight: bold;
    margin-bottom: 5%;
}

.imagem-github{
    color: #FFFFFF;
    width: 64px;
    height: 64px;
}
footer a{

    text-decoration: none;
    color: var(--branco);
}

h1{
    padding: 5%;
    font-family: var(--fonte-titulo);
    font-size: 2rem;
    text-align: center;
}
.container-item-valor{
    display: flex;
    flex-direction: column;
    width: 75%;
    height: 25%;
    gap: 10%;
    align-items: center;
    
}

.input-item-nome{
    width: 100%;
    height: 50%;
    text-align: center;
    padding: .5rem 1rem;
    border-radius: 12px;
    border: none;
    font-weight: bold;
}

.input-item-valor{
    width: 50%;
    height: 50%;
    padding: .5rem 1rem;
    text-align: center;
    border-radius: 12px;
    border: none;
    font-weight: bold;
}
.button{
    width: 50%;
    height: 2rem;
    color: var(--branco);
    background-color: var(--cor-secundaria);
    border: none;
    padding: 1rem;
    display: flex;
    justify-content: center; 
    align-items: center; 
    border-radius: 12px;
    font-weight: bold;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
}

.button img {
    width: 1.25rem; /* Ajusta o tamanho do ícone */
    height: 1.25rem;
    filter: brightness(0) invert(1); /* Faz a imagem ficar branca */
}

.valor-total{
    font-weight: bold;
    text-align: center;
}
.lista-de-compras{
    display: flex;
    flex-direction: column;
    width: 75%;
    height: 13rem;
    padding-bottom: 30%; 
    list-style-type: none;
    overflow-y: auto;
}
.lista-de-compras li{
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    border-radius: 12px;
    background-color: var(--cor-primaria);
    margin-bottom: 1rem;
    color: var(--branco);
    font-weight: bold;
     
}
.nome-item{
    text-align: center;
    font-weight: bold;
}
.container-valor{
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}
.container-quantidade{
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}
.quantidade{
    width: 20%;
}
.container-botoes{
    width: 100%;
    display: flex;
    justify-content: space-around;
    
}
.container-botoes button{
    width: 40%;
}

/* Para telas de até 480px (ex: smartphones menores que o iPhone 14 Pro Max) */
@media (max-width: 480px) {
    main {
        width: 75%;
    }

    .container-item-valor {
        width: 90%;
    }

    .input-item-nome, .input-item-valor {
        font-size: 0.9rem;
    }

    .button {
        width: 80%;
        font-size: 0.9rem;
    }

    .lista-de-compras {
        width: 90%;
        height: 10rem;
    }
}

/* Para telas entre 481px e 767px (tablets pequenos ou smartphones maiores) */
@media (min-width: 481px) and (max-width: 767px) {
    main {
        width: 85%;
    }

    .container-item-valor {
        width: 85%;
    }

    .input-item-nome, .input-item-valor {
        font-size: 1rem;
    }

    .button {
        width: 70%;
    }

    .lista-de-compras {
        width: 85%;
        height: 12rem;
    }
}

/* Para telas entre 768px e 991px (tablets e dispositivos maiores) */
@media (min-width: 768px) and (max-width: 991px) {
    main {
        width: 80%;
    }

    .container-item-valor {
        width: 80%;
    }

    .input-item-nome, .input-item-valor {
        font-size: 1.1rem;
    }

    .button {
        width: 60%;
    }

    .lista-de-compras {
        width: 80%;
        height: 14rem;
    }
}

/* Para telas entre 992px e 1199px (laptops menores) */
@media (min-width: 992px) and (max-width: 1199px) {
    main {
        width: 75%;
    }

    .container-item-valor {
        width: 75%;
    }

    .input-item-nome, .input-item-valor {
        font-size: 1.2rem;
    }

    .button {
        width: 50%;
    }

    .lista-de-compras {
        width: 75%;
        height: 16rem;
    }
}

/* Para telas entre 1200px e 1919px (laptops e desktops) */
@media (min-width: 1200px) and (max-width: 1919px) {
    main {
        width: 70%;
    }

    .container-item-valor {
        width: 70%;
    }

    .input-item-nome, .input-item-valor {
        font-size: 1.3rem;
    }

    .button {
        width: 40%;
    }

    .lista-de-compras {
        width: 70%;
        height: 18rem;
    }
}

/* Para telas com 1920px ou maiores (grandes monitores) */
@media (min-width: 1920px) {
    main {
        width: 60%;
    }

    .container-item-valor {
        width: 60%;
    }

    .input-item-nome, .input-item-valor {
        font-size: 1.4rem;
    }

    .button {
        width: 35%;
    }

    .lista-de-compras {
        width: 60%;
        height: 20rem;
    }
}