@import url("https://fonts.googleapis.com/css2?family=Changa+One:ital@0;1&display=swap");
*{
    margin: 0;
    scroll-behavior: smooth;
}
body{
    height: 200vh;
    width: 100vw;
    overflow-x: hidden;
    background-color: floralwhite;
}
header{
    height: 5%;
    width: 100%;
    /* border: 3px solid red; */
    border-bottom: 2px solid sandybrown;
}
nav{
    height: 100%;
    width: 100%;
    /* border: 3px solid navy; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    background-color: ghostwhite;
}
.title{
    /* border: 2px solid red; */
    margin-left: 1rem;
}
.title h1{
    margin-left: 0;
    font-family: "Changa One", sans-serif;
    font-weight: normal;
}
.title h1 img{
    height: 1.2rem;
}
.close{
    margin-left: 0;
    margin-right: 2rem;
}
.close img{
    height: 1.2rem;
}
.close p{
    font-size: 1.4rem;
}
.close p a{
    text-decoration: none;
    color: #000;
    font-family: "Merriweather", serif;
    font-weight: bold;
    transition: text-decoration 0.37s ease-in-out;
}
.close p a:hover{
    text-decoration: underline 2px red;
}

main{
    height: 95%;
    width: 100%;
}
.items{
    height: 85%;
    width: 100%;
    /* border: 2px solid black; */
}

.item1{
    margin-top: 2rem;
    height: 16%;
    width: 95%;
    /* border: 2px solid red; */
    display: flex;
    /* backdrop-filter: blur(6px); */
    background-color: white;
    border: 2px solid black;
    border-radius: 8rem;
    margin-left: auto;
    margin-right: auto;
}
.pic1{
    height: 100%;
    width: 20%;
    /* border: 2px solid black; */
}
.pic1 img{
    height: 90%;
    width: 90%;
    border-radius: 3rem;
    position: relative;
    left: 2rem;
    top: 0.6rem;
}
.detail1{
    height: 100%;
    width: 80%;
    /* border: 2px solid blue; */
    display: flex;
    flex-direction: column;
}
.price1{
    height: 75%;
    width: 100%;
    /* border: 2px solid green; */
    display: flex;
    justify-content: space-between;
}
.price1 .about1 {
    /* border: 2px solid red; */
    display: flex;
    margin-left: 2rem;
}
.price1 .about1 .name1{
    align-content: center;
    align-items: center;
    /* border: 2px solid navy; */
    width: 20%;
    height: 100%;
}
.price1 .about1 .name1 p{
    color: #000;
    font-size: 2rem;
    text-align: center;
    font-family: "Changa One", sans-serif;
}
.price1 .about1 .description1{
    /* border: 2px solid red; */
    align-items: center;
    align-content: center;
    width: 80%;
    height: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.price1 .about1 .description1 p{
    color: gray;
    font-size: 1rem;
    
    font-family: "Changa One", sans-serif;
}
.price1 .cost1{
    font-size: 2rem;
    /* border: 2px solid black; */
    align-content: center;
    margin-right: 2rem;
}
.price1 .cost1 p{
    color: #000;
    font-family: "Changa One", sans-serif;
}
.quantity1{
    height: 25%;
    width: 100%;
    /* border: 2px solid orange; */
}
.quantity1 p{
    font-size: 2rem;
    margin-left: 5rem;
}
.quantity1 img{
    height: 1.5rem;
    cursor: pointer;
    margin-top: 0.3rem;
}

.item2{
    margin-top: 2rem;
    height: 17%;
    width: 95%;
    /* border: 2px solid red; */
    display: flex;
    /* backdrop-filter: blur(6px); */
    background-color: white;
    border: 2px solid black;
    border-radius: 8rem;
    margin-left: auto;
    margin-right: auto;
}
.pic2{
    height: 100%;
    width: 20%;
    /* border: 2px solid black; */
}
.pic2 img{
    height: 90%;
    width: 90%;
    border-radius: 3rem;
    position: relative;
    left: 2rem;
    top: 0.6rem;
}
.detail2{
    height: 100%;
    width: 80%;
    /* border: 2px solid blue; */
    display: flex;
    flex-direction: column;
}
.price2{
    height: 75%;
    width: 100%;
    /* border: 2px solid green; */
    display: flex;
    justify-content: space-between;
}
.price2 .about2 {
    /* border: 2px solid red; */
    display: flex;
    margin-left: 2rem;
    /* border: 3px solid red; */
}
.price2 .about2 .name2{
    align-content: center;
    align-items: center;
    /* border: 2px solid navy; */
    height: 100%;
    width: 20%;
}
.price2 .about2 .name2 p{
    color: #000;
    font-size: 2rem;
    text-align: center;
    font-family: "Changa One", sans-serif;
}
.price2 .about2 .description2{
    /* border: 2px solid red; */
    align-items: center;
    align-content: center;
    height: 100%;
    width: 80%;
    /* border: 2px solid navy; */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.price2 .about2 .description2 p{
    color: gray;
    font-size: 1rem;
    
    font-family: "Changa One", sans-serif;
}
.price2 .cost2{
    font-size: 2rem;
    /* border: 2px solid black; */
    align-content: center;
    margin-right: 2rem;
}
.price2 .cost2 p{
    color: #000;
    font-family: "Changa One", sans-serif;
}
.quantity2{
    height: 25%;
    width: 100%;
    /* border: 2px solid orange; */
}
.quantity2 p{
    font-size: 2rem;
    margin-left: 5rem;
}
.quantity2 img{
    height: 1.5rem;
    cursor: pointer;
    margin-top: 0.3rem;
}

.item3{
    margin-top: 2rem;
    height: 17%;
    width: 95%;
    /* border: 2px solid red; */
    display: flex;
    /* backdrop-filter: blur(6px); */
    background-color: white;
    border: 2px solid black;
    border-radius: 8rem;
    margin-left: auto;
    margin-right: auto;
}
.pic3{
    height: 100%;
    width: 20%;
    /* border: 2px solid black; */
}
.pic3 img{
    height: 90%;
    width: 90%;
    border-radius: 3rem;
    position: relative;
    left: 2rem;
    top: 0.6rem;
}
.detail3{
    height: 100%;
    width: 80%;
    /* border: 2px solid blue; */
    display: flex;
    flex-direction: column;
}
.price3{
    height: 75%;
    width: 100%;
    /* border: 2px solid green; */
    display: flex;
    justify-content: space-between;
}
.price3 .about3 {
    /* border: 2px solid red; */
    display: flex;
    margin-left: 2rem;
    /* border: 3px solid red; */
}
.price3 .about3 .name3{
    align-content: center;
    align-items: center;
    /* border: 2px solid navy; */
    height: 100%;
    width: 20%;
}
.price3 .about3 .name3 p{
    color: #000;
    font-size: 2rem;
    text-align: center;
    font-family: "Changa One", sans-serif;
}
.price3 .about3 .description3{
    /* border: 2px solid red; */
    align-items: center;
    align-content: center;
    height: 100%;
    width: 80%;
    /* border: 2px solid navy; */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.price3 .about3 .description3 p{
    color: gray;
    font-size: 1rem;
    
    font-family: "Changa One", sans-serif;
}
.price3 .cost3{
    font-size: 2rem;
    /* border: 2px solid black; */
    align-content: center;
    margin-right: 2rem;
}
.price3 .cost3 p{
    color: #000;
    font-family: "Changa One", sans-serif;
}
.quantity3{
    height: 25%;
    width: 100%;
    /* border: 2px solid orange; */
}
.quantity3 p{
    font-size: 2rem;
    margin-left: 5rem;
}
.quantity3 img{
    height: 1.5rem;
    cursor: pointer;
    margin-top: 0.3rem;
}

.item4{
    margin-top: 2rem;
    height: 17%;
    width: 95%;
    /* border: 2px solid red; */
    display: flex;
    /* backdrop-filter: blur(6px); */
    background-color: white;
    border: 2px solid black;
    border-radius: 8rem;
    margin-left: auto;
    margin-right: auto;
}
.pic4{
    height: 100%;
    width: 20%;
    /* border: 2px solid black; */
}
.pic4 img{
    height: 90%;
    width: 90%;
    border-radius: 3rem;
    position: relative;
    left: 2rem;
    top: 0.6rem;
}
.detail4{
    height: 100%;
    width: 80%;
    /* border: 2px solid blue; */
    display: flex;
    flex-direction: column;
}
.price4{
    height: 75%;
    width: 100%;
    /* border: 2px solid green; */
    display: flex;
    justify-content: space-between;
}
.price4 .about4 {
    /* border: 2px solid red; */
    display: flex;
    margin-left: 2rem;
    /* border: 3px solid red; */
}
.price4 .about4 .name4{
    align-content: center;
    align-items: center;
    /* border: 2px solid navy; */
    height: 100%;
    width: 20%;
}
.price4 .about4 .name4 p{
    color: #000;
    font-size: 2rem;
    text-align: center;
    font-family: "Changa One", sans-serif;
}
.price4 .about4 .description4{
    /* border: 2px solid red; */
    align-items: center;
    align-content: center;
    height: 100%;
    width: 80%;
    /* border: 2px solid navy; */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.price4 .about4 .description4 p{
    color: gray;
    font-size: 1rem;
    
    font-family: "Changa One", sans-serif;
}
.price4 .cost4{
    font-size: 2rem;
    /* border: 2px solid black; */
    align-content: center;
    margin-right: 2rem;
}
.price4 .cost4 p{
    color: #000;
    font-family: "Changa One", sans-serif;
}
.quantity4{
    height: 25%;
    width: 100%;
    /* border: 2px solid orange; */
}
.quantity4 p{
    font-size: 2rem;
    margin-left: 5rem;
}
.quantity4 img{
    height: 1.5rem;
    cursor: pointer;
    margin-top: 0.3rem;
}

.item5{
    margin-top: 2rem;
    height: 17%;
    width: 95%;
    /* border: 2px solid red; */
    display: flex;
    /* backdrop-filter: blur(6px); */
    background-color: white;
    border: 2px solid black;
    border-radius: 8rem;
    margin-left: auto;
    margin-right: auto;
}
.pic5{
    height: 100%;
    width: 20%;
    /* border: 2px solid black; */
}
.pic5 img{
    height: 90%;
    width: 90%;
    border-radius: 3rem;
    position: relative;
    left: 2rem;
    top: 0.6rem;
}
.detail5{
    height: 100%;
    width: 80%;
    /* border: 2px solid blue; */
    display: flex;
    flex-direction: column;
}
.price5{
    height: 75%;
    width: 100%;
    /* border: 2px solid green; */
    display: flex;
    justify-content: space-between;
}
.price5 .about5 {
    /* border: 2px solid red; */
    display: flex;
    margin-left: 2rem;
    /* border: 3px solid red; */
}
.price5 .about5 .name5{
    align-content: center;
    align-items: center;
    /* border: 2px solid navy; */
    height: 100%;
    width: 20%;
}
.price5 .about5 .name5 p{
    color: #000;
    font-size: 2rem;
    text-align: center;
    font-family: "Changa One", sans-serif;
}
.price5 .about5 .description5{
    /* border: 2px solid red; */
    align-items: center;
    align-content: center;
    height: 100%;
    width: 80%;
    /* border: 2px solid navy; */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.price5 .about5 .description5 p{
    color: gray;
    font-size: 1rem;
    
    font-family: "Changa One", sans-serif;
}
.price5 .cost5{
    font-size: 2rem;
    /* border: 2px solid black; */
    align-content: center;
    margin-right: 2rem;
}
.price5 .cost5 p{
    color: #000;
    font-family: "Changa One", sans-serif;
}
.quantity5{
    height: 25%;
    width: 100%;
    /* border: 2px solid orange; */
}
.quantity5 p{
    font-size: 2rem;
    margin-left: 5rem;
}
.quantity5 img{
    height: 1.5rem;
    cursor: pointer;
    margin-top: 0.3rem;
}


.bill{
    height: 15%;
    width: 100%;
    /* border: 2px solid black; */
    background-color: navy;
}
.total{
    height: 40%;
    width: 100%;
    /* border: 2px solid white; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}
.text{
    margin-left: 3rem;
    color: whitesmoke;
    font-size: 2rem;
    font-family: "Changa One", sans-serif;
}
.totalcost{
    margin-right: 3rem;
    color: whitesmoke;
    font-size: 2rem;
   font-family: "Changa One", sans-serif;
}
.order{
    height: 60%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.line{
    font-size: 1rem;
    color: floralwhite;
    font-family: "Changa One", sans-serif;
}
.place button{
    height: 2rem;
    width: 30rem;
    font-size: 1rem;
    font-family: "Changa One", sans-serif;
    background-color: wheat;
    color: #000;
    border-style: none;
    box-shadow: 0 0 5px whitesmoke;
    cursor: pointer;
}