@charset "utf-8";

html {
    box-sizing: border-box;
    background-color: #131313;
    font-family: 'Golos Text', Arial, Helvetica, sans-serif;
    font-size: 1.2em;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

#wrapper {
    margin: auto;
    width: 100%;
    max-width: 1000px;
    background-color: #ece5d1;
    border: 2px solid #9a384f;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

header {
    width: 100%;
    background-color: #A32929;
    max-width: 1000px;
    margin: auto;
}

header,
footer {
    background-color: #A32929;
    text-align: center;
}


h1 {
    font-family: 'Lobster', sans-serif, Helvetica;
    font-size: 2rem;
    color: #A32929;
    text-align: center;
    margin: 50px 0;
}

h2 {
    color: #166742;
    padding: 15px;
    margin: 0;
    text-align: center;
}

.store-logo a {
    font-family: 'Leckerli One', 'Courier New', Courier, sans-serif;
    color: rgb(254, 161, 93);
    font-size: 2rem;
}

h5 {
    padding: 10px;
    margin: 0;
}

p {
    padding: 0;
    margin: 0;
}

/*---Footer---*/
footer {
    color: #fafaf4;
    padding: 20px;
}

footer h2 {
    color: rgb(103, 141, 103);
    padding: 0;
    margin-bottom: 10px
}

footer p {
    padding: 0;
    margin: 0;
    font-size: small;
    color: rgb(0, 0, 0);
}

.footer_ul {
    margin: 0;
}

.footer_infor {
    padding-bottom: 20px;
}

.footer-icons {
    font-size: 30px;
}

/*---ul/li---*/
li {
    list-style: none;
}

ul {
    padding-left: 0;
}

/*---Link---*/
a {
    color: #A32929;
    font-weight: bold;
    text-decoration: none;
}

.nav_a {
    color: #fafaf4;
}

a:hover,
a:focus,
a:active {
    color: #ad7568;
    font-weight: bold;
    text-decoration: none;
    background-color: #dccbb3;
    border-radius: 5px;
}

/*---Navigation---*/
.navigation-nav {
    display: none;
}

.navigation-ul {
    margin: 0;
    padding: 0;
}

.nav_a {
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 1em;
    color: #fafaf4;
    border-bottom: 1px solid white;
    font-weight: bold;
    padding: 10px;
}


/*---Image---*/

img {
    max-width: 100%;
}

.popular-product img {
    max-width: 80%;
}

.menu-div img {
    max-width: 50%;
}

.delivery-logos img {
    max-width: 90%;
}

.our-product-div img {
    max-width: 150px;
    border-radius: 50%;
}

.gift-card img {
    max-width: 70%;
    display: block;
    margin: auto;
}

.lorem-image {
    max-width: 100%;
    float: right;
}

/*---Section---*/
.section {
    padding-bottom: 50px;
    text-align: center;
}

.popular-product {
    background-color: #f2e4ce;
}

.section p {
    padding: 0 20px;
    text-align: center;
    margin-bottom: 0;
}

.see-menu-p {
    margin: 10px;
    color: #9a384f;
}

/*---Blockquote---*/

blockquote {
    color: #9b7b05;
}

/*---Most Popular---*/

.popular-product {
    text-align: center;
    border: 3px dotted rgb(91, 105, 40);
    margin: 20px;
    padding-top: 20px;
    background-color: #f0ad79;
    border-radius: 20px;
}

.popular-product p {
    margin: 5px;
}

/*----------------Form------------------------*/
.form-div {
    padding: 30px;
    display: block;
}


.input-label-group label {
    padding-bottom: 5px;
    font-size: 1rem;
}

input[type=text],
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 20px;
}

input[type=submit] {
    background-color: #A32929;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 5px;
}

.form-div input[type=submit] {
    display: block;
    margin: 0 auto;
}

input[type=submit]:hover {
    background-color: #ad6834;
}

/*----------------Home Page----------------------*/
.hamburger-btn {
    display: block;
    background-color: transparent;
    border: none;
    font-size: 1.3rem;
    color: white;
    text-transform: uppercase;
    cursor: pointer;
    padding-right: 12px;
}

#top-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/*----------------Menu Page----------------------*/

.menu-div {
    text-align: center;
}

.item {
    border: 2px solid black;
    margin: 10px;
    background-color: white;
}

.item p {
    font-size: 16px;
}

.item p:nth-child(3),
.item p:first-of-type {
    padding: 10px;
}

/*----------------Order Online Page------------------------*/
.delivery-logos {
    text-align: center;
}

.delivery-logos li {
    padding: 10px;
}

/*----------------About Us Page------------------------*/

.all-our-product {
    margin-top: 30px;
}

.about-us h2 {
    margin-top: 50px;
}

/*----------------Giftcard Page------------------------*/

.gift-card p {
    text-align: center;
    padding-bottom: 15px;
}

/*----------------Contact Page------------------------*/

.question,
.lorem {
    border: 3px dotted rgb(91, 105, 40);
    border-radius: 10px;
    margin: 0 20px 50px 20px;
    text-align: left;
    background-color: #cbe0c9;
}

.lorem p,
.lorem li,
.lorem img,
.lorem h3 {
    text-align: left;
    padding: 0 20px;
}

.lorem-img-div {
    text-align: center;
}

ol li {
    list-style-image: url(../images/croissant1.png);
}

table,
th,
td {
    border: 1px solid rgb(140, 9, 9);
}

table {
    margin: auto;
}

th {
    background-color: #9b7b05;
    text-align: center;
}

/*----------------Media Query------------------------*/
@media (min-width: 650px) {

    .all-popular-div,
    .infor-container,
    .menu,
    .delivery-logos,
    .all-our-product,
    .gift-div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        align-items: center;
    }

    .infor-container,
    .gift-div {
        align-items: start
    }

    .form-div {
        width: 60%;
        margin: auto;
    }

    .form-gift-card {
        width: 100%;
    }

    .gift-div img {
        max-width: 80%;
        margin: 50px;
    }
}

@media (min-width: 800px) {

    .hamburger-btn {
        display: none;
    }

    .navigation-nav {
        display: block;
    }

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .navigation-ul {
        display: flex;
    }

    .nav_a {
        padding: 5px 15px;
        border-bottom: none;
    }

    .show {
        display: block;
    }

    .intro,
    .chef,
    .view-menu,
    .our-team {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-items: center;
    }

    .chef>.chef-infor {
        grid-column-start: 1;
        grid-row-start: 1;
    }

    .intro img,
    .chef img,
    .view-menu img,
    .our-team-div img,
    .our-team img {
        max-width: 90%;
        border-radius: 20px;
    }

    .delivery-logos {
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 0;
    }
}

@media (min-width: 900px) {

    .all-popular-div,
    .menu,
    .all-our-product {
        grid-template-columns: repeat(4, 1fr);
    }

    .all-our-product {
        align-items: start;
    }
}