* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Smythe', cursive;
    grid-template-columns: 1.2em auto 1.2em;
}

/* ==========
Typography
========== */

h1 {
    font-size: 2.4375rem;
    align-self: end;
}

.subtitle {
    font-size: 0.8265rem;
}

.bill-title,
.modal-title {
    justify-self: center;
}

.bill-title,
.bill-total,
.modal-title {
    align-self: center;
}

h1,
.subtitle {
    grid-column: 2;
}

h1,
.subtitle,
.payment-btn,
.complete-order-btn {
    color: #fff;
}

.food-emoji {
    font-size: 4rem;
    opacity: .85;
    grid-row: 2 / 5;
}

.food-title,
.order-item,
.total-price-text {
    font-size: 1.75rem;
    grid-column: 2;
}

.food-title {
    grid-row: 2;
}

.food-ingredients {
    grid-row: 3;
}

.food-price {
    grid-row: 4;
}

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

.food-ingredients,
.remove-item-btn {
    color: #8B8B8B;
}

.order,
.order-item-price,
.total-price-number,
.total-price-text {
    grid-row: 1;
}

.list {
    list-style: none;
    margin-bottom: 1em;
}

.total-price-text {
    grid-column: 1;
}

.total-price-number,
.order-item-price,
.add-item {
    justify-self: end;
}

.modal-title {
    margin: 1em 0;
}

.input-detail {
    margin-bottom: 1em;
}

/* buttons */

button {
    border: none;
    cursor: pointer;
    font-family: 'Verdana', Geneva, Tahoma, sans-serif;
}

.add-item {
    border: 1.5px solid #8B8B8B;
    background: #fff;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 200;
    width: 50px;
    height: 50px;
    text-align: center;
    grid-row: 2 / 4;
    grid-column: -1;
}

.add-item:hover,
.add-item:focus {
    background-color: #393333;
    color: #fff;
}

.remove-item-btn {
    background: #fff;
    font-size: .75rem;
    margin-left: 0.5em;
}

.complete-order-btn,
.payment-btn {
    background: #16DB99;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    font-weight: bold;
    padding: 0.75em 0;
}

.complete-order-btn:hover,
.complete-order-btn:focus,
.payment-btn:hover,
.payment-btn:focus {
    background-color: #065F46;
}

.payment-btn {
    margin-top: 1em;
}

/* ==========
Layout
========== */
body,
header,
.food-detail,
.container-order,
.list,
.bill-total,
form {
    display: grid;
}

header {
    grid-column: 1 / -1;
    grid-template-columns: 1.2em auto;
}

main,
.modal,
.message-container,
.modal-title,
form {
    grid-column: 2;
}

.container-background{
    background-image: url(images/ferks-guare-KEZdWfYD-ow-unsplash\ 1.png);
    max-width: 600px;
    height: 120px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.modal {
    position: fixed;
    left: 1.2em;
    right: 1.2em;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 50vh;
    max-width: 524px;
    border-radius: 5px;
    box-shadow: 0px 0px 6px 2px #666;
    background-color: #ffffff;
    grid-template: 
        .25fr .65fr
        /
        .75em auto .75em ;
    
}

.container-order {
    grid-template-rows: 100px auto 80px auto;
}

.food-detail {
    grid-template: 
        1.5em
        repeat(3, auto)
        1.5em 
        / 
        minmax(50px, 70px)
        minmax(100px, 150px)
        auto;
    border-bottom: 1px solid #D2D2D2;
}

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

.hidden,
.modal,
.message-container {
    display: none;
}

.message-container {
    background: #ECFDF5;
    text-align: center;
    color: #065F46;
    margin-top: 2em;
    padding: 2em 0;
    font-size: 1.6rem;
}