*,
*::before,
*::after{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  font-family: Verdana, sans-serif;
  padding: 0;
  margin: 0;
}

:root{
  --color-bg: #afafaf;
  --color-bg-alt: #111111;
  --color-bg-alt-2: #999999;
  --color-primary: #111111;
  --color-secondary: darkorange;
  --color-btn: #121212;
  --color-btn-active: #666666;
}

html{
  font-size: 62.5%;
}
body{
  font-size: 1.6rem;
  letter-spacing: 0.2px;
  background-color: var(--color-bg);
  color: var(--color-primary);
}
a{
  text-decoration: none;
  color: inherit;
}
ul{
  list-style: none;
}

/*NAVBAR***************************/
.navBar{
  top: 0;
  left: 0;
  width: 100%;
  position: absolute;
  background: transparent;
/*  justify-content: space-between;*/
/*  border: 2px solid white;*/
}
.navMenu{
  display: none;
}

.navFlex{
  justify-content: flex-end;
  align-items: center;
  flex-flow: row nowrap;
  padding: 0 15px;
}
.navIcon{
  margin: 0 20px;
}
.navIcon, 
.navMenu, 
.mediaFlex svg, 
#bookTable svg{
  width: 3rem;
/*  filter: invert(90%);*/
}
.mediaFlex svg{
  width: 2rem;
}
/*.navBar, */
.navFlex, 
main form, 
.mediaFlex,
.scheduleFlex{
  display: flex;
}
.navFlex a{
  padding: 10px 20px;
  white-space: nowrap;
/*  border-radius: 5px;*/
}
.navFlex a:active{
  color: #dfdfdf;
  background: var(--color-bg-alt);
}
.mediaFlex{
  gap: 30px;
}


/*MAIN*****************************/
main, #aboutUs, #orderNow, #bookTable, #testimonials, footer{
/*  border: 2px solid white;*/
  padding: 100px 20px;
}
main{
  background-image: url("https://c8.alamy.com/comp/2DBCHMR/high-sodium-food-quick-snack-and-meal-in-minutes-concept-with-hot-water-pouring-over-instant-noodles-in-a-ceramic-bowl-isolated-on-white-background-2DBCHMR.jpg");
}

main section{
/*  border: 2px solid white;*/
  margin: auto;
  max-width: 1000px;
}
main section div{
/*  border: 2px solid white;*/
  background: rgba(255, 255, 255, 0.6);
  padding: 10px;
  margin-right: auto;
  width: 50%;
}
main h1, main input, main button{
  margin-bottom: 30px;
}
main h1{
  font-size: 5rem;
}
main button{
  font-size: inherit;
  background: var(--color-secondary);
  color: #111111;
  padding: 8px;
  border: 0;
}
main button:active{
  background: orange;
}
main input{
  border: 0;
  font-size: inherit;
  width: 100%;
  padding: 8px;
}

/*ABOUTUS******************************/
#aboutUs{
  background-image: url("https://www.shutterstock.com/shutterstock/photos/2156013927/display_1500/stock-photo-delicus-turkis-rice-with-ketchup-2156013927.jpg");
}

#aboutUs section{
/*  border: 2px solid white;*/
  margin: auto;
  max-width: 1000px;
}
#aboutUs section div{
/*  border: 2px solid white;*/
  background: rgba(255, 255, 255, 0.6);
  padding: 10px;
  margin-left: auto;
  width: 50%;
}
#aboutUs *{
  margin-bottom: 30px;
}
#aboutUs h2, 
#orderNow h2, 
#bookTable h2, 
#testimonials h2{
  font-size: 4rem;
}
h4{
  font-weight: normal;
  color: var(--color-secondary);
  margin-bottom: 20px;
}

.arrowBtn{
  padding: 10px 20px;
  white-space: nowrap;
  background: #333333;
  color: #dfdfdf;
/*  border-radius: 5px;*/
}
.arrowBtn:active{
  background: var(--color-bg-alt);
  color: #dfdfdf;
}
.arrowBtn svg{
  filter: invert(100%);
  width: 1.6rem;
  background: #333333;

}

/*orderNow*************************/
#orderNow, #bookTable, #testimonials{
  text-align: center;
}
#orderNow{
  background: #efefef;
}
#orderNow section{
/*  border: 2px solid white;*/
  margin: auto;
  max-width: 1000px;
}

.menuFlex, .dishFlex{
  display: flex;
  justify-content: center;
}
.menuFlex li:first-of-type{
  color: var(--color-secondary);
  border-bottom: 2px solid var(--color-secondary);
}
.menuFlex li{
  padding: 20px;
  border-bottom: 2px solid #999999;
}
.dishFlex{
  gap: 20px;
}
.dishFlex li{
  margin: 20px 0;
}
.dishPlaceholder{
/*  border: 2px solid white;*/
/*  margin: auto;*/
  color: #dfdfdf;
  width: 200px;
  height: 300px;
  background: #333333;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}
.dishPlaceholder *{
  margin-bottom: 25px;
}
.dishInfo{
  display: block;
/*  margin: 0 0 20px 0;*/
/*  border: 2px solid white;*/
}
.rating:after{
  content: "★★★★★";
  color: var(--color-secondary);
  font-size: 2.5rem;
}
.menuPage:after{
  content: "• • ● • • •";
  color: var(--color-secondary);
  font-size: 3rem;
}

.orderBtn{
  padding: 10px 20px;
  white-space: nowrap;
  background: var(--color-secondary);
  color: #222222;
  border-radius: 5px;
}
.orderBtn:active{
  background: var(--color-bg-alt);
  color: #dfdfdf;
}

/*BOOKTABLE*************************/
#bookTable{
  background-image: url("https://www.fivehearthome.com/wp-content/uploads/2021/02/Quick-Stovetop-Baked-Beans-Summer-Side-Dish-5-Ingredient-Recipe-by-Five-Heart-Home_1200pxSquare.jpg");
}
#bookTable > section{
  margin: auto;
  max-width: 1080px;
  background: rgba(255, 255, 255, 0.6);
}
#bookTable *{
  margin-bottom: 15px;
}
#bookTable h2{
  margin-bottom: 35px;
}
.phoneNumber{
  font-size: 3rem;
  color: var(--color-secondary);
}
.scheduleFlex{
  margin: auto;
  max-width: 1000px;
  justify-content: space-evenly;
  text-align: left;
}

#bookTable iframe{
  width: 1000px;
  height: 520px;
/*  margin-top: 30px;*/
}

/*TESTIMONIALS********************/
#testimonials{
  background: #efefef;
}
#testimonials section{
/*  border: 2px solid white;*/
  margin: auto;
  max-width: 800px;
}
.review{
  margin: 15px 0;
}
.review p{
  font-size: 2.5rem;
}
.review span{
  opacity: 70%;
}

.profilePicture{
  border-radius: 50%;
  filter: invert(100%);
}

/*FOOTER**************************/
footer{
  text-align: left;
  background: #dfdfdf;
  padding: 20px 30px;
  font-size: 1.5rem;
}
.ftFlex{
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.ftFlex section + section{
  width: 200px;
}
.ftFlex section + section *{
  margin-bottom: 20px;
}

.media-icons, .ft-links{
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.media-icons svg{
  width: 3rem;
/*  filter: invert(100%);*/
}

.ft-bottom{
  display: flex;
  padding: 5px 0;
  border-top: 2px solid #999999;
}

/*MEDIA***************************/
@media all and (max-width: 500px) {
  .hideB{
    display: none;
  }
}
@media all and (max-width: 650px) {
  .hideC{
    display: none;
  }
  .navMenu{
    display: block;
  }
  main section div{
    padding: 10px;
    margin: auto;
    width: 100%;
  }
  #aboutUs section div{
    padding: 10px;
    margin: auto;
    width: 100%;
  }
  #bookTable iframe{
    width: 400px;
    height: 310px;
  }
  footer{
    padding: 20px 10px;
  }
}
@media all and (max-width: 850px) {
  .hideD{
    display: none;
  }
  .dishFlex{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
  }
  #bookTable iframe{
    width: 700px;
    height: 410px;
  }
  .navFlex{
    justify-content: space-between;
  }
}