body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-family: "Smythe", serif;
    
}

.normal{
    font-weight: normal;
}

.flex-justify{
    display: flex;
    justify-content: space-between;
}

.container{
    width: 90%; /*600px*/
    margin: 0 auto;
}

header{
    height: 10.32rem; /*165px*/
    background-color: azure;
    background-image: url("./images/burger.jfif");
    background-size: cover;
    background-position: center;
    color: white;
    padding: 2.875rem; /*46px*/

}

h1, h3{
    margin: 0px;
}

h1{
    margin: 0;
    font-size: 3rem; /*39px*/

}

h3{
    font-weight: 400;
    font-size: 1.75rem; /*28px*/
    
}

h2{
    margin-top: 1.25em; /*20px*/
    font-size: 1.25em; /*20px*/

}

h4{
    font-size: 1.25rem;
    margin: 1em 0 0 0;
}

.food-menu{
    margin: 3.75em 1.25em 0 1.25em; /*60px 20px 0 20px*/
    border-bottom: 1px solid #D2D2D2;
}

.col-food{
    display: flex;
}

.food-emoji{
    margin-top: 0;
    font-size: 5.625rem;/* 90px;*/
    line-height: 1.125;/* 92px;*/
}

.food-ingredients{
    font-size: 1.5rem; /*16px*/
    color: #8B8B8B;
}

.food-info div{
    font-size: 1.125rem;
}

.plus-btn{
    font-size: 16px;
    color: #3C3C3C;
    background-color: white;
    border-radius: 50%;
    border: 3px #DEDEDE solid;
    cursor: pointer;

    width: 2em;
    height: 2em;
    font-size: 1rem;

}

.plus-btn:hover{
    color: white;
    background-color: #3C3C3C;
}

.plus-btn:active{
    color: whitesmoke;
    background-color: #252424;
}

.display{
    display: block;
}

.none{
    display: none;
}

.place-order, .confirm-order{
    margin: 45px 20px 0 20px;
}

.place-order h3{
    text-align: center;
}

.order-list{
    border-bottom: 2px solid #393333;
    margin-top: 35px;
}

.order-list-row{
    margin-top: 5px;
}

.order-list-item{
    font-weight: 400;
    font-size: 28px;

}

.order-price, .order-total{
    font-size: 1.25rem;
}

.remove{
    color: #BBBBBB;
    display: inline-block;
    margin-left: 0.5em;
    cursor: pointer;

}

.order-total-summary{
    margin-top: 14px;
}

.complete-order{
    /*margin: 40px 0 0 0;*/
    margin-top: 2.5em;
    margin-left: auto;
    margin-right: auto;
    border: none;
    width: 100%;
    padding: 1.25em 6.4em; /*20px 150px*/

    
    font-family: Verdana;
    font-weight: 700;
    font-size: 16px;

}

.complete-order-enable, .modal-btn{
    background-color: #16DB99;
    color: white;
    cursor: pointer;
}

.complete-order-enable:hover, .modal-btn:hover{
    background-color: #15CC8F;
    color: whitesmoke;
}

.complete-order-disable{
    background-color: #e6e6e6;
    color: #a6a6a6;
}

.modal{

    display: none;
    /*
    
    right: 0;
    left: 0;
     192px;
    bottom: 2.375em; 38px;*/
    position: fixed;
    top: 12em;
    left: 15%;
    margin: auto;
    height: 23.75em; /* 380px;*/
    width: 70%;/* 525px; */
    border: 1.5px solid #757575;
    border-radius: 4px;
    border-width: 1.5px;

    box-shadow: 5px 5px 255px 0px #00000080;
    background-color: white;

    font-family: Verdana;
}

.card-details{
    
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0%;
    text-align: center;
}

.payment{
    width: 90%;
    margin: 20px auto;
}

.payment-input{
    margin-top: 20px; 
    border: 1px solid #757575;
    border-radius: 1.5px;
    color: #757575;
    
    padding: 15px 25px;
    width: 100%;
    box-sizing:border-box;
}

.modal-btn{
    width: 100%;
    padding: 15px 25px;
    border: none;
    font-weight: 700;
    margin-top: 30px;
}

.confirm-order{
    background-color: #ECFDF5;
    padding: 50px 60px;
    color: #065F46;

    font-family: Smythe;
    font-weight: 400;
    font-size: 32px;

    text-align: center;
}


@media(max-width:480px){
    .container{
        width: 100%;
    }

    .complete-order{
        padding: 1.25em 6.5em;
    }

    .modal{

        position: fixed;
        top: 12em;
        left: 5%;
        margin: auto;
        width: 90%;/* 525px; */

    }
}