@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Kumbh+Sans:wght,YOPQ@100..900,300&family=League+Spartan:wght@100..900&family=Lexend+Deca:wght@100..900&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&family=Outfit:wght@100..900&family=Overpass:ital,wght@0,100..900;1,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Work+Sans:ital,wght@0,100..900;1,100..900&family=Young+Serif&display=swap');
:root{
    --Red: hsl(14, 86%, 42%);
    --Green: hsl(159, 69%, 38%);
    --Rose50: hsl(20, 50%, 98%);
    --Rose100: hsl(13, 31%, 94%);
    --Rose300: hsl(14, 25%, 72%);
    --Rose400: hsl(7, 20%, 60%);
    --Rose500: hsl(12, 20%, 44%);
    --Rose900: hsl(14, 65%, 9%);
}
body{
    min-height: 100vh;
    height: auto;
    background-color: var(--Rose100);
    justify-content: initial;
    flex-direction: column;
}
h1{
    font-size: 2.5rem;
}
.margin{
    margin: 0;
}
.width{
    width: 100%;
}
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
main{
    width: calc(clamp(20rem,100vw,25rem) - 3rem);
    flex-direction: column;
    justify-content: initial;
    font-family: 'Red Hat Text',sans-serif;
    padding-inline: 1.5rem;
    margin-block: 4rem;
    position: relative;
}
.card{
    height: auto;
    margin-block: 2rem;
    font-weight: 400;
}
.item{
    display: none;
    margin-block-end: 1.5rem;
}
.bimage{
    aspect-ratio: 1.5;
    background-size: cover;
    border-radius: 1rem;
}
.height3{
    height: 3rem;
}
.cartItem{
    width: 10rem;
    background-color: white;
    border-radius: 5rem;
    margin: auto;
    position: relative;
    bottom: 1.5rem;
}
.notAdded{
    justify-content: space-between;
    width: calc(100% - (2rem + 2px));
    height: calc(100% - 2px);
    border:1px solid var(--Rose500);
    padding-inline: 1rem;
    border-radius: 5rem;
    cursor: pointer;
}
.cartImage{
    width: 20px;
    height: 20px;
}
.added{
    width: calc(100% - 2rem);
    height: 100%;
    padding-inline: 1rem;
    background-color: var(--Red);
    display: none;
    justify-content: space-between;
    border-radius: 5rem;
    color: white;
}
.addedimg,.addedimg2{
    width: 13px;
    height: 13px;
    border-radius: 50%;
    cursor: pointer;
}
.addedimg{
    border: 1px solid white;
}
.font{
    font-size: 1rem;
}
.addedimg2{
    border: 1px solid #CAAFA7;
    position: absolute;
    right: 0px;
    bottom: 40%;
}
.addedimg:hover{
    background-color: white;
}
:is(.addedimg:hover) path{
    fill: var(--Red);
}
.addedimg2:hover{
    border-color: black;
}
:is(.addedimg2:hover) path{
    fill: black;
}
.item p{
    margin: 0;
}
.weight600{
    font-weight: 600;
}
.rose400{
    color: var(--Rose400);
}
.rose900{
    color: var(--Rose900);
}
.red{
    color: var(--Red);
}
.cart{
    width: calc(100% - 3rem);
    min-height: 17rem;
    height: auto;
    background-color: white;
    border-radius: 1.5rem;
    padding-inline: 1.5rem;
    padding-block: 1.5rem;
    position: relative;
}
.weight700{
    font-weight: 700;
}
.heading{
    font-size: 1.5rem;
}
.cart img{
    width: 67%;
    aspect-ratio: 1;
    margin-inline: 17.5%;
    margin-block: 10%;
}
.end{
    text-align: center;
    font-size: 0.9rem;
}
.orderItems{
    height: auto;
}
.orderItem{
    display: none;
    height: auto;
    margin-block: 1.5rem;
    position: relative;
}
.orderName{
    margin-block: 0.5rem;
}
.orderAmount,.orderRate,.orderTotal{
    display: inline;
}
.orderRate{
    margin-inline: 1.5rem;
}
.orderTotal{
    color: var(--Rose500);
}
.hr{
    opacity: 0.1;
}
.finalTotal{
    display: none;
    height: 2rem;
    justify-content: space-between;
    margin-block: 1rem;
}
.finalNumber{
    font-size: 1.5rem;
}
.carbon{
    display: none;
    color: var(--Rose300);
    background-color: var(--Rose100);
    border-radius: 8px;
    margin-block: 1rem;
    filter: brightness();
    font-size: 0.75rem;
}
.carbon img{
    width: 20px;
    height: 20px;
    margin-inline: 4px;
}
.darken{
    margin-inline: 4px;
}
.confirm{
    background-color: var(--Red);
    border-radius: 5rem;
    color: white;
    display: none;
    cursor: pointer;
    margin-block: 1rem;
}
.confirm:hover{
    opacity: 0.2;
}
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
}
.confirmation{
    display: none;
    position: fixed;
    width: clamp(20rem,100vw,25rem);
    height: 46rem;
    background-color: white;
    bottom: 0%;
    z-index: 300;
    border-radius: 1rem;
    padding-inline: 1.5rem;
    padding-block: 2rem;
    font-family: 'Red Hat Text',sans-serif;
    box-sizing: border-box;
}
.confirmation h1{
    padding-inline: 0rem;
    margin-block: 1rem;
}
.line{
    display: block;
}
.text{
    font-weight: 400;
}
.cartDisplay{
    width: calc(100% - 2rem);
    height: 50%;
    padding-inline: 1rem;
    padding-block: 1rem;
    background-color: var(--Rose100);
    border-radius: 0.5rem;
}
.itemsDisplay{
    height: calc(100% - 3rem);
    overflow-y: scroll;
}
.itemDisplay{
    height: auto;
    display: none;
    flex-wrap: wrap;
    align-items: center;
}
.left{
    width: 20%;
    aspect-ratio: 1;
    background-size: cover;
}
.middle{
    width: calc(60% - 1rem);
    height: 4rem;
    padding-inline-start: 1rem;
}
.middle p{
    margin: 0;
    margin-block: 0.5rem;
    font-size: 0.875rem;
    color: var(--Rose900);
    white-space: nowrap;
    overflow: hidden; 
}
.markup{
    margin-inline-end: 1rem;
}
.right{
    width: 20%;
    height: 4rem;
    justify-content: initial;
}
.right p{
    margin: 0;
    width: 100%;
    text-align: right;
}
.hrDisplay{
    opacity: 0.2;
    margin-block: 1rem;
    color: var(--Rose300);
}
.totalDisplay{
    justify-content: space-between;
}
.finalDisplay{
    font-size: 1.5rem;
}
.startNew{
    background-color: var(--Red);
    color: white;
    border-radius: 5rem;
    cursor: pointer;
    margin-block: 2rem;
}
@media (min-width:50rem) {
    main{
        width: clamp(50rem,100%,62.5rem);
        padding-inline: 0;
    }
    .card{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;
    }
    .items{
        width: 66%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .item{
        width: 31%;
        font-size: 0.75rem;
    }
    .bimage{
        aspect-ratio: 1;
        border-radius: 0.5rem;
    }
    .cartItem{
        width: 80%;
        height: 2.5rem;
    }
    .notAdded{
        justify-content: space-evenly;
        width: calc(100% -(1rem + 2px));
        padding-inline: 0.5rem;
    }
    .cart{
        width: calc(30% - 3rem);
        min-height: 40%;
        top: -4.5rem;
    }
    .carbon{
        font-size: 0.7rem;
    }
    .confirmation{
        width: 30rem;
        height: 44rem;
        position: absolute;
        margin: auto;
        bottom: initial;
        top: calc(50% - 22rem)
    }
    .line{
        display: inline;
    }
} 
@media (min-width:75rem){
    main{
        width: 75rem;
        margin-block: 0;
    }
    .item{
        font-size: 1rem;
    }
    .cartItem{
        height: 3rem;
    }
    .carbon{
        font-size: 0.8rem;
    }
    .confirmation{
        width: 35rem;
    }
}