:root{
    font-size: 11px;
    text-align: center;
    
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
ul{
    list-style-type: none;
}
body{
    height:100vh;
    background-color:rgba(242, 226, 204,0.2);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
.attribution a {
    color: hsl(228, 45%, 44%);
}


/* main section  */

.main{
    width: 100%;
    display: grid;
    grid-template-columns:auto auto auto auto ;
    padding:5rem;
    border-radius:5px;
    padding:6rem;

}
@media (max-width:1000){
    .main{grid-template-columns:repeat(2,1fr) ;}
}
@media (max-width:800px) {
    .main{ grid-template-columns:  1fr; }
}
h1{
    text-align: left;
    font-size:3rem;
}
.desserts{
    width:90%;
    height:80%;
    display: grid;
    column-gap: 2rem;
    grid-column: 1/3;
    grid-template-columns: auto auto auto;
    gap: 1rem;
}

.dessert{
    width:100%;
    display:flex;
    flex-direction: column;
    border-radius:5px;
    gap:1rem;
    
}

.design{
    position: relative;
    display: flex;
}
.image{
    width:100%;
    height:15rem;
}
.image img{
    width: 100%;
    height: 100%;
    border-radius: 5px;
}
.imageshow{
    border:solid 3px rgb(199, 59, 15);
    transition: border 0.1s ease;
}
.orderButton{
    width: 13rem;
    height: 4rem;
    text-align: center;
    border:solid 1px orangered;
    border-radius: 20px;
    background-color: white;
    position: absolute;
    bottom:-4rem;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap:1rem;
    }
.orderButton img{
    width: 20px;
    height: 20px;
}

.orderItem{
    background-color:rgb(199, 59, 15);
}


.showCount{
    display: 'block';
}

.counterButtons button {
    margin: 5px;
    padding:5px;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    
    background-color: white;
    border: none;
    cursor: pointer;
}
.description{

    display: flex;
    gap: 1rem;
    flex-direction: column;
    text-align: left;
    padding-top:20px;
    padding-left:5px;
    font-size: 1.5rem;
}
.category{
    color: hsl(12, 20%, 44%);
   
}
.name{
   color: hsl(14, 65%, 9%);
   font-weight: 700;
}
.price{
   color:rgb(199, 59, 15) ;
}
/* cart section */
.cart{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background-color: white;
    border-radius: 5px;
    font-family: 'RedHat';
    gap: 2rem;
}
.color{
    color: orangered;
    font-size:2rem;
}
.image-cart{
    display: flex;
    justify-content: center;
    align-content: center;
    width:20rem;
    height:20rem;
}
.image-cart img{
    height:100%;
    width:100%;
}
.order-cart{
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content:left;
}
.product-cart{
    
    font-size:1.5rem;
    color: black;
    padding-top:0.5rem;
    font-weight: 700;
    
}
li{
    display: flex;
    flex-direction: column;
    font-size: 1.5rem;
}
.count-span{
    
    color:  orangered;
    font-size: 1.5rem;
    font-weight:700;
    
}
.price-cart{
    color: hsl(12, 20%, 44%);
    padding: 1rem;
    border-bottom:solid 1px  hsl(12, 44%, 82%);
    font-weight: 500;
    font-size: 1.5rem;
    font-weight: 700;
}
.total-price{
    display: flex;
    gap:2rem;
    justify-content:space-around;
    font-size:2rem;
    
    
}
.delivery{
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    height:5rem;
    border-radius: 1rem;
    background-color: hsl(13, 31%, 94%);
}
#total-amount{
    font-weight: 700;
}
#message{
    color: hsl(12, 20%, 44%);
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    font-family: RedHat;

}
/* confirm section */
.confirm-button{
    width:80%;
    height: 5rem;
    border: none;
    background-color:rgb(199, 59, 15) ;
    border-radius: 1rem;
    color: white;
    
}
.confirmsummary{
    width:40rem;
    flex-direction: column;
    gap:1rem;
    align-items:flex-start;
    border-radius:0.5rem;
    background-color: white;
    position: fixed;
    z-index: 11;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 3rem;
    font-size: 3rem;
    color: black;
    
}

.confirmsummary span{
    color:hsl(12, 20%, 44%);
    font-size: 1rem;
}
.confirm-background{
    
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    background-color: rgba(0, 0, 0, 0.4);
    
    height: 100vh;

}
#order-summary{
    background-color: hwb(24 97% 1%);
    width: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.5rem;
    
}
.confirm-item{
    display: flex;
    width: 100%;
    justify-content: space-between;
    border-bottom:solid 1px  hsl(12, 44%, 82%) ;
    padding:1rem;
}
.order-detail{
    display: flex;
    text-align: center;
    gap: 1rem;
}
.order-detail p{
    color:rgb(199, 59, 15)  ;
    font-size: 1rem;
    
}