*{
    padding: 0;
    margin: 0;
}
:root{
    --lightmode_body_colour:white;
    --lightmode_text_colour:black;
    --lightmode_header_colour: wheat;
    --lightmode_nav_colour:#e7f5ff;
    --heading-shadow_colour:rgb(70, 67, 67);

}

.dark_theam{
    --darkmode_body_colour:#0a192f;
    --darkmode_text_colour:white;
    --lightmode_header_colour:#0a192f;
    --lightmode_nav_colour:#0a192f;
    --darkmode_nav_colour:#0a192f;
    --heading-shadow_colour:rgb(255, 255, 255);


}
header{
    background-color: var(--dark_nav_colour);
}
.heading {
   
    width: 100%;
    margin: 2rem 0rem 2rem 0rem;
    padding: 2rem;
    text-align: center;
    background-color: var(--lightmode_header_colour);
    box-shadow: 3px 4px 25px var(--heading-shadow_colour);
    
}
.heading h1{
    color: var(--darkmode_text_colour);
    font-size: 1.9rem;
    text-transform: uppercase;
    font-weight: bold;
    padding: 1rem 0rem;

}
#sun,#moon{
    font-size: 2rem;
    color: var(--darkmode_text_colour);
    
}
#sun{
    display: none;
   
}
#moon{
    display: block;
   
}
.food_iteams_container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 5rem 0rem ;
    background-color: var(--darkmode_body_colour);
}
.food_item_box{
    text-align: center;
    font-weight: bold;
    width: 150px;
    height: 180px;
    border-radius: 20px;
    background-color: var(--darkmode_body_colour);
    box-shadow: 20px 8px 30px rgb(70, 67, 67);
}
.food_name {
    padding: 5px;
    color: var(--darkmode_text_colour);
}

.food_img{
    width: 150px;
    height: 120px;
    overflow: hidden;
    border-radius: 10px;
}
.food_img img{
    width: 70%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}
.footer{
    width: 100%;
    height: 30px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    color: var(--darkmode_text_colour);
    
}
.plus{
    background-color: green;
    width: 20px;
    height: 20px;
    color: white;
    border: 1px solid transparent;
    margin: 6px 10px 2px 5px;
    border-radius: 2px;
    font-weight: bold;
    cursor: pointer;

}
.minus{
    background-color: red;
    width: 20px;
    height: 20px;
    color: white;
    border: 1px solid transparent;
    margin: 6px 5px 2px 10px;
    border-radius: 2px;
    font-weight: bold;
    cursor: pointer;


}

.counter{
    margin: 5px 0px 0px 0px;
}

.submit_container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    align-items: center;
}

.p_txt h6{
    font-size: 22px;
    color: green;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;

}

.submit_btn{
    padding: 10px;
    background-color: green;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    margin: 0px 0px 0px 10px;
    /* border: 1px solid transparent; */
    border: none;
    text-align: center;
    cursor: pointer;

}
.reset_btn{
    padding: 10px;
    background-color: red;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    margin: 0px 0px 0px 10px;
    /* border: 1px solid transparent; */
    border: none;
    text-align: center;
    cursor: pointer;

}
.btn_box{
    width: 100%;
    margin: 1rem 0rem 1rem 0rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
}
.submission{
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 3rem 0rem 3rem 0rem;
    padding: 0px 20px;
    text-align: center;
}

.resorent_logo {
    padding: 1rem;
   
}
.resorent_logo img{
    width: 100px;
    height: 100px;
    /* mix-blend-mode: multiply; */
}

.time_and_date{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px 0px 20px 0px;
}


.print_btns{
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;

}

.backbtn{
   
    padding: 10px;
    background-color: red;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    margin: 0px 0px 0px 10px;
    /* border: 1px solid transparent; */
    border: none;
    text-align: center;
    cursor: pointer;


}
.printbtn{
    padding: 10px;
    background-color: green;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    margin: 0px 0px 0px 10px;
    /* border: 1px solid transparent; */
    border: none;
    text-align: center;
    cursor: pointer;

}
.submission,
.print {
    display: none;
}