* {
    margin : 0;
    padding : 0;
    box-sizing : border-box;
    font-family: "Oswald";
    
}

body {
    height:100vh;
    background: 
        linear-gradient(
            90deg,
            rgb(83, 3, 112)0%,
            rgba(26, 25, 96)100%
        );
        /* display: grid; */
    align-items:center;
    justify-content:center;
    justify-items: center;
 
}

.navigation{
    
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin:1px;
    padding: 2px;
    background-color: rgb(65, 134, 48);
}

.navigation ul {
    display: flex;
    border-radius: 20px;
    justify-content: center;
  
    
}

.navigation ul li{
    
    list-style: none;
    margin: 10px;
    
}

.navigation ul li a{
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.navigation ul li a .ico{
    font-size: 1.5rem;
    line-height: 30px;

}

.navigation ul li:hover a .ico{
    transform:  translateY(-10px);
}

.navigation ul li a .text{

    position: absolute;
    color: #fff;
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    transition: 0.5s;
    opacity: 0;
    transform: translateY(20px);
}

.navigation ul li:hover a .text{
    opacity: 1;
    transform: translateY(10px);
}


.list{
    color: #fff;
    margin: 5%;  
   
}

.ico,.text{
    color: #fff;
}

.container{
    border: 2px solid #fff;
    padding:30px 20px;
    width: 97%;
    min-width:500px;
    margin: 5px;
    min-width: fit-content;
    align-items: center;
    justify-content: center;

}

.itens-container::before{
    content: "item";
    align-self: center;
    position: relative;
    top: -10px;
    ;
}

.new-itens-container{
    background-color: #fff;
    padding:20px 10px;
    border-radius:5px;
    box-shadow: 0 15px 30px rgba(0,0,0,0);
    display:flex;
    margin-left: 10px;
    flex-wrap: wrap;
    

}

.itens-container, .compras-container{
    background-color: #fff;
    justify-content: space-between;
    align-items: center;
    margin: 6px;
    padding: 30px 20px;
    margin:10px;
    margin-top: 60px;
    border-radius: 10px;
    box-shadow: 0 15px 30px rgba(0,0,0,0);
}

.item{
    display: grid;
    grid-template-columns: 1fr 0.5fr 0.5fr 0.5fr 0.5fr;
    align-items: center;
    margin-bottom: 6px;
    margin-top: 6px;
    outline: solid;
    border-radius: 10px;
    padding: 3px;
}

.item>*{
    width: 40px;
    margin-left: 10%;
    margin-right: 10%;
}

.item i{
    cursor: pointer;
}


.txt{
    justify-self: left;
}

.new-itens-container input {
    flex:3;
    font-size:1rem;
    border: 2px solid #d1d3d4;
    border-radius:12px;
    font-weight:500;
    text-align: center;
    margin: 3px;
    
}

.new-itens-container input:focus{
    outline:none;
    border-color: aqua;
}

.new-itens-container button:hover{
    background-color: rgb(89, 89, 207);
}

.new-itens-container button{
    flex:1;
    border-radius: 5px;
    font-weight: 500;
    height: 100%;
    font-size: 1rem;
    border:none;
    background-color: rgb(0, 102, 255);
    color: #fff;
    margin: 3px;
    padding: 12px;
    cursor:pointer ;

}


.pego{
    text-decoration: line-through;

}

.fa-trash{
    width: 40px;
    background-color: rgb(198, 29, 29);
    color: #fff;
    padding: 12px;
    border-radius: 5px;

}

.fa-trash:hover{
    background-color: rgb(231, 75, 75);
    rotate:19deg;
}

.final-container{
    display:flex;
    /* height: 50px; */
    justify-content: center;
}

.final-container button{
    background-color: rgb(150, 209, 135);
    border-radius: 10px;
    padding: 10px 10px;
    margin: 20px;
    width: 20%;
    height: 100%;
    margin-top: 10px;
    cursor: pointer;  
}

.final-container button:hover {
    background-color: rgb(74, 107, 24);
    transform: translateY(10px);
    color: #fff;
}

.Valortotal{
    background-color: chocolate;
    border-radius: 10px;
    padding: 10px 20px;
    box-shadow: 0 15px 30 px rgba(0,0,0,0);
    width: 30%;
    height: 100%;
    margin-top: 10px;
    /* margin-left: 200px; */

}
/*Utilities*/
.error{
    border: 2px solid red !important;

}

.error::placeholder{
    color:red;
}

/* History */
.compra{
    align-items: center;
    margin-bottom: 6px;
    margin-top: 6px;
    border-radius: 20px;
    padding: 10px;
    outline: 3px solid rgb(84, 29, 123);
}

.compra-title{
    display: grid;
    grid-template-columns: 1fr 1fr 0.3fr 0.3fr;
    align-items: center;
}

.fa-file-export{
    width: 40px;
    margin-right: 10px;
    background-color: rgb(36, 176, 36);
    color: #fff;
    padding: 12px;
    border-radius: 5px;
}

.fa-file-export:hover{
    background-color: rgb(9, 100, 40);
    rotate:19deg;
}

.compra::after{
    
    position: absolute;
}

.compra-itens-container> .item {
    display : none;
}

.compra-itens-container> .visible{
    display : grid;
    padding: 1px;
    border-radius: 10px;
    outline:  1px solid;
}