html {
    height:                 100%;
}

/*-------------------BODY-----------------*/

body {
    font-family:            sans-serif;
    margin:                 0;
    padding:                0;
    height:                 100%;
}


.body-home {
    background-image:       url(images/daceeecd15b25c7824411d56814340f7.jpg);
    background-position:    center;
    background-repeat:      no-repeat;
    background-size:        cover;
    background-attachment:  fixed;
    height:                 100%;
}

.body-menu {
    background-image:       url(images/tasty-pizza-near-ingredients_23-2147772080.jpg);
    background-position:    center;
    background-repeat:      no-repeat;
    background-size:        cover;
    background-attachment:  fixed;
    height:                 100%;
}

/*-------------------HOME-Pg-----------------*/

.starter-img {
    background-image:       url(images/2377d8_ea84c46a10314da18959c856c55d31c4~mv2.webp);
    background-repeat:      no-repeat;
    background-size:        cover;
    background-attachment:  fixed;
    width:                  100%;
}

.main-img {
    display:                 block;
    margin :                 auto;
    padding-top:             70px;
}

#home{
    display:                flex;
    flex-direction:         column;
    align-items:            center;
}

#home-logo {
    display:                block;
    width:                  150px;
    height:                 150px;
    border-radius:          50%;
    margin:                 10px auto;
    border:                 5px solid orangered;
    border-style:           groove;
    overflow:               hidden;
}

#home-logo img {
    max-width:              100%;
    max-height:             100%;
    display:                block;
}

.content {
    color:                 wheat;
    font-size:             25px;
    font-weight:           600;
    text-align:            center;
    padding-top:           5px;
    margin:                15px ;
}

.logo-and-content {
    display:                flex;
    align-items:            center;
    margin-top:             50px;
}


.home-menu h1 {
    text-align:             center;
    color:                  wheat;
    font-size:              35px;
    font-family:            Arial, Helvetica, sans-serif;
}

.home-menu{
        padding-top:        10px;
    }

 

.home-menu-item img {
    border:                 5px solid orangered;
    display:                inline-block;
    align-items:            center;
    margin-left:            70px;
    margin-top:             20px;
    margin-bottom:          10px;
    width:                  25%;

}

/*-------------------HEADER-----------------*/

.header {
    background:              rgba(7, 118, 170, 0.5);
    color:                   wheat;
    width:                   100%;
    height:                  70px;
    top:                     0;
    position:                fixed;
    overflow:                hidden;
    text-align:              center;
}

.header i {
    padding:                 17px 0px 0px 17px;
    margin-left:             200px;
    color:                   wheat;
    size:                    15px;

}

.phone-number {
    margin-left:            5px;
    color:                  wheat;
    font-size:              15px;
}

.header h2 {
    margin:                 5px ; 
    color:                  wheat;
    font-family:            helvetica;
    font-size:              30px;
    align-items:            center;
}

.logo img {
    height:                 70px;
    width:                  auto; 
    float:                  left;
}

/*-------------------MENU-Pg-----------------*/

#starter{
    padding:                50px;
}

.starter-list a{
    text-decoration:        none;
}

.starter-list-item {
    border:                 5px solid wheat;
    margin:                 10px;
    display:                flex;
    flex-wrap:              wrap;
}

.starter-list h1 {
    font-weight:            bold;
    font-size:              large 20px;
    color:                  wheat;
    padding-left:           10px;
    margin-top:             20px;
    margin-bottom:          10px;
}

.image-container {
    width:                  calc(33.33% - 20px);
    margin:                 10px;
    text-align:             center;
}

.image-container img {
    width:                  100%;
    height:                 auto;
    border:                 5px solid orangered;
    border-style:           groove;
    margin:                 -5px;
}

.image-container p {
    margin-top:             5px;
    font-size:              25px;
    color:                  wheat;
}

/*-------------------STARTER-DINNER-DESSERT-Pg-----------------*/

#starter-menu {
    padding:                80px;
}

.menu-details img {
    display:                block;
    margin:                 0 auto;
    width:                  100%;
    border:                 10px solid orangered;
    border-style:           ridge;
}
    
.menu-details h2 {
    color:                  wheat;
    font-size:              20px;
    text-align:             center;
    margin:                 20px;
}

.menu-details p {
    color:                  wheat;
    font-size:              20px;
    text-align:             center;
    margin:                 20px;
}

.menu-details {
    margin-left:            25px;
    margin-right:           25px;
}

.starter-menu-info p {
    font-size:              25px;
    display:                inline-block;
}

.menu-extras h2 {
    text-align:             left;
    margin-left:            7px;
}
.menu-extras {
    line-height:            25px;
    margin-left:            10px;
    color:                  wheat;
}

.menu-extras label {
    line-height:            25px;
    margin-left:            10px;
}

/*-------------------ORDER-PLACED-Pg-----------------*/

.order-form {
    max-width:              400px;
    margin:                 0 auto;
    margin-left:            20px;
  }
  
  form {
    display:                flex;
    flex-direction:         column;
  }
  
  label {
    margin-bottom:          10px; 
    color:                  wheat;
  }
  
  textarea {
    padding:                10px;
    margin-bottom:          15px;
    border:                 1px solid #ccc;
    border-radius:          5px;
  }
  
  .place-order-btn {
    display:                inline-block;
    padding:                10px 135px; 
    background-color:       orangered;
    color:                  wheat;
    font-weight:            900;
    text-decoration:        none;
    border:                 none;
    border-radius:          5px;
    cursor:                 pointer;
  }
  
  .place-order-btn:hover {
    background-color:       wheat;
    color:                  orangered;
  }
  
/*-------------------FOOTER-----------------*/

  .footer {
    background-color:       rgba(7, 118, 170, 0.5);
    color:                  wheat;
    padding:                20px;
    text-align:             center;
}

.footer-content {
    display:                flex;
    justify-content:        space-around;
}

.footer-section {
    display:                inline-block;
    align-items:            center;
}

.footer-section i {
    font-size:              24px;
    margin-bottom:          10px;
}

.footer-section p {
    margin:                 0;
}

.social-icons {
    margin-top:             10px;
}

.social-icon {
    font-size:              24px;
    color:                  wheat;
    margin:                 0 5px;
}

/*-------------------RESPONSIVE-LAYOUTS-----------------*/
@media only screen and (min-width: 600px) {
.content p {
    margin:                 auto;
}
.home-menu {
    width:                  80%;
    margin:                 auto;
}
}

@media only screen and (min-width: 800px) {
.content p {
    margin:                 auto;
}
.home-menu {
    width:                  80%;
    margin:                 auto;
}
}

@media only screen and (min-width: 1000px) {
.content p {
     margin:                auto;
}
.home-menu {
    width:                  80%;
    margin:                 auto;
}
}

/*------------------------------------------*/



    
@media only screen and (min-width: 2000px) {
  
    .menu-details img {
        width:              50%;
    }
    }

    
@media only screen and (min-width: 1500px) {
  
    .menu-details img {
        width:              50%;
    }
    }