@import url('https://fonts.googleapis.com/css2?family=Karla:wght@200;300;400;500&display=swap');

body {
  padding: 0px;
  margin: 0 auto;
  color: #F9FAF8;
  font-family: 'Karla', sans-serif;
}
.containerHeader {
  background-color: #1F2937;
  padding: 0 10%;
  font-size: 1.4em;
}
.containerHeader h1 {
  font-size: 1.3em;
  color: #F9FAF8;
  font-weight: 600;
  margin: 0;
}
.containerMenu {
  background-color: #ffffff;
  padding: 5rem 10%;
  font-size: 1.4em;
}
.containerMenu h2 {
  text-align: center;
  font-size: 1.3em;
  color: #1F2937;
  margin: 0;
}
.containerQuote {
  background-color: #eeeeee;
  padding: 4rem 18%;
  font-size: 1.4em;
}
.containerCall {
  background-color: #ffffff;
  padding: 4rem 10%;
  font-size: 1.4em;
}

footer {
  background-color: #1F2937;
  display: block;
  font-size: 1.4em;
  padding: 1rem 10%;
  text-align: center;
}
footer p {
  color: #ffffff;
  font-size: 0.7em;
}
footer a {
  color: #ffffff;
  font-size: 1em;
}
.headerBar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 0;
}

.headerBar .logo {
  flex: 1 1 0%;
  letter-spacing: -0.5px;
  font-weight: 400;
  align-self: center;
  font-size: 1.2em;
}
.headerBar .menu {
  flex: 4 1 0%;
  text-align: right;
  align-self: center;
}
.headerBar .menu ul li {
  display: inline;
  padding: 0.3rem;
}
.headerBar .menu a {
  font-size: 0.8em;
}
.headerArea {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  padding: 7rem 0;
  font-size: 1em;
}
.headerArea .one {
  flex: 1 1 0%;
  font-size: 1.4em;
  font-weight: 400;
  text-align: left;
}
.headerArea .two {
  flex: 1 1 0%;
  text-align: right;
  align-self: center;
  min-height: 17rem;
  background-image: url(./images/header-steak.jpg);
  background-position:center;
  background-size: 110%;
  background-repeat: no-repeat;
  border-radius: 10px;
  border: 4px solid #373737;
}
.headerArea .image {
  max-width: 400px;
  height: 230px;
  background-color: #eee;
  border-radius: 10px;
}
.headerArea .title {
  font-size: 0.7em;
  font-weight: 300;
  line-height: 1.7rem;
  padding: 1rem 0;
}
.headerArea .button {
  font-size: 0.6em;
}
.menuSection {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding-top: 2rem;
  background-color: #ffffff;
}

.menuSection .item {
  flex: 1 1 10%;
  align-self: center;
  border:4px solid #dbdbdb;
  text-align: center;
  background-size: 150%;
  aspect-ratio: 1 / 1;
  opacity: 0.9;
  background-repeat: no-repeat;
  border-radius: 10px;
  font-size: 1em;
}
.menuSection .title {
  padding: 40% 0;
}

.steaks {
  background-image: url(./images/steaks.jpg);
}
.appetizers {
  background-image: url(./images/appetizers.jpg);
}
.burgers {
  background-image: url(./images/burgers.jpg);
}
.drinks {
  background-image: url(./images/drinks.jpg);
}
.desserts {
  background-image: url(./images/desserts.jpg);
}
.menuSection .item:hover {
  opacity: 0.5;
}
.quoteSection {
  display: block;
  padding: 1rem 0;
  text-align: center;
  color: #1F2937;
}
.quoteSection .review {
  font-size: 1em;
  font-weight: 300;
  line-height: 2.5rem;
  padding-bottom: 1.5rem;
  text-align: justify;
}
.quoteSection .reviewer {
  font-size: 1em;
  font-weight: 500;
  text-align: right;
}
.callSection {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  padding: 4rem 4rem;
  background-color:#1F2937;
}
.callSection .title {
  font-size: 1.3em;
}
.callSection .sub-title {
  font-size: 0.6em;
  font-weight: 300;
  line-height: 1.7rem;
}
.callSection .one {
  flex: 3 1 0%;
  font-size: 1.4em;
  font-weight: 400;
  text-align: left;
  align-self: center;
}
.callSection .two {
  flex: 1 1 0%;
  text-align: right;
  align-self: center;
}
.callSection .button {
  font-size: 0.9em;
}
.button {
  border-radius: 10px;
  padding: 0.5em 1.6em;
  background-color: #dfc312;
  border: 2px solid #dfc312;
  color: #333;
  width: 140px;
  text-align: center;
  margin-top: 1rem;
}
.button:hover {
  background-color: transparent;
  color: #dfc312;
  border: 2px solid #dfc312;
}
a {
  color: #F9FAF8;
  text-decoration: none;
  padding-bottom: 4px;
}
a:hover, a:active {
  border-bottom: 3px solid gold;
}