*{
    margin: 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

body{
    background-color: rgb(255, 207, 144);
    height: 100vh;
}

/*______________BANNER______________*/
.banner{
    background-image: url(./imgs/banner1.jpg);
    max-width: 100%;
    max-height: 100%;
    height: 35em;
    display: block;
}

.banner h1{
    color: white;
    opacity: 100%;
    text-shadow:-3px 2px black, -5px 3px black;
    font-size: 6em;
    text-align: center;
    padding-top: 2em;
    letter-spacing: 0.2em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/*______________TÍTULO CARDAPIO E HR______________*/
main h1{
    color: white;
    text-shadow:-3px 2px black, -5px 3px black;
    font-size: 4em;
    text-align: center;
    padding: 0.7em;
    letter-spacing: 0.1em;
    text-decoration: underline solid;
}

/*______________AVISO CARDÁPIO______________*/
/*
h4{
    color: rgb(128, 128, 128);
    text-align: center;
    letter-spacing: 0.1em;
    font-size: 1em;
    padding: 1em;
    margin-top: -3em;
    margin-bottom: 1.6em;
}
*/

/*______________CARDAPIO______________*/
#cardapio {
    background-color: rgb(121, 121, 121);
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    padding: 0.8em;
    width: 95%;
    height: 34em;
    overflow-y: auto;
    border: rgb(158, 158, 158) solid;
    border-radius: 1em;
    margin-top: -0.5em;
}

#cardapio::-webkit-scrollbar{
    width: 1.5em;
}

#cardapio::-webkit-scrollbar-thumb{
    background-color: rgb(43, 43, 43);
    border-radius: 1em;
}

#cardapio::-webkit-scrollbar-track{
    background-color: rgb(167, 167, 167);
    border-radius: 1em;
}

/*______________SCROLLBAR DO PREÇO UNITÁRIO______________*/
.listaPrecoUni{
    max-height: 5em;
    overflow-y: auto;
    list-style-type: none;
    padding: 0;
}

/*______________LISTA DE PEDIDOS______________*/
.infoPedido {
    background-color: rgb(197, 197, 197);
    max-width: 100%;
    max-height: 100%;
    width: 47%;
    margin: auto;
    border-radius: 1.5em;
    border: rgb(158, 158, 158) solid;
    margin-top: 1.5em;
    background: linear-gradient( rgb(223, 223, 223), rgb(182, 182, 182), rgb(223, 223, 223));
}

.infoPedido h2{
    color: white;
    text-shadow: -2px 2px black, -3px 2px black;
    font-size: 2em;
    text-align: center;
    padding: 0.4em;
}

.divPedido {
    max-width: 100%;
    max-height: 100%;
    width: 45%;
    margin-inline-start: 27%;
    padding: 1.5em;
}

.divPedido h3{
    border: 2px solid black;
    border-radius: 0.5em;
    padding: 0.6em;
}
/*_______________ESTILIZAÇÃO DAS DIVS DO CARDPAIO E DOS ITENS_________________*/

.div-item{
    display:inline-flex;
}

.div-item{
    max-width: 100%;
    max-height: 100%;
    width: 13em;
    height: 25.7em;
    display:inline-flex;
    padding: 3em;
    flex-direction: column;
    margin-left: 2.2em;
    margin-top: 2em;
    border-radius: 1em;
    align-items: center;
    background: linear-gradient(40deg, rgb(223, 223, 223), rgb(136, 136, 136), rgb(223, 223, 223));
}

.div-item:hover{
    background: linear-gradient(40deg, rgb(168, 168, 168), rgb(192, 192, 192), rgb(168, 168, 168));
}

/*_________________ELEMENTOS DE CADA ITEM_________________*/
/*_______________________IMAGEM___________________________*/
.imgItem{
    max-width: 100%;
    max-height: 100%;
    width: 15em;
    height: 15em;
    border-radius: 20em;
}
/*_______________________CÓDIGO___________________________*/
.codeItem{
    font-size: 1.6em;
    text-shadow: -2px 2px whitesmoke, -1px 1px whitesmoke;
}
/*_______________________NOME___________________________*/
.nameItem{
    padding: 0.6em;
    font-size: 1.2em;
    text-align: center;
    font-weight: bold;
}
/*_______________________PREÇO___________________________*/
.priceItem{
    padding: 0.45em;
    font-size: 1.1em;
    text-align: center;
    font-weight: bold;
}
/*_______________________DETALHES___________________________*/
.detailsItem{
    padding: 0.2em;
    font-size:1.05em;
    text-align:center;
}
/*_______________________BOTÃO___________________________*/
.button-adicionar{
    padding: 0.4em;
    margin-top: 0.6em;
    border-radius: 0.7em;
    background: linear-gradient( rgb(223, 223, 223), rgb(168, 168, 168), rgb(223, 223, 223));
}

.button-adicionar:hover{
    background: linear-gradient(rgb(168, 168, 168), rgb(223, 223, 223), rgb(168, 168, 168));
}