body {
  background-color:rgb(53, 39, 0);
  font-family:'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: rgb(240,200,40);
  margin:0;
  padding-bottom: 3rem;
}

a {
  color: rgb(240,200,40);
  text-decoration:none;
}


#main-header {
  background-color:rgba(0,0,0,0.4);
  display:flex;
  align-items:center;
  justify-content:space-between;
  /* width:100%; */
  height:5rem;
  padding: 0 5%;
}

#side-drawer {
  width:100%;
  height:100%;
  background-color:rgba(63, 63, 63, 0.7);
  display:none;
}

#side-drawer:target {
  display:block;
  position:fixed;
  top:0;
  left:0;

}

#side-drawer ul {
  margin:0;
  padding:4rem 1rem;
  list-style:none;
  display:flex;
  flex-direction:column;
  align-items:center;
}

#side-drawer li {
  margin:1rem 0;
}

#side-drawer a {
  color:rgb(224, 216, 182);
  font-size:2rem;
}

#side-drawer header {
  background-color:rgba(0,0,0,0.4);
  display:flex;
  align-items:center;
  justify-content:space-between;
  /* width:100%; */
  height:5rem;
  padding: 0 5%;
}

#logo {
  font-size:1.5rem;
  font-weight:bold;
  text-transform:uppercase;
}

#main-header .hamburger {
  display:none;
}

.hamburger {
  width:2rem;
  height:2rem;
  flex-direction:column;
  justify-content:space-between;
}

.hamburger span {
  width:100%;
  height:3px;
  background-color:rgb(224, 216, 182);
}

#main-header ul {
  list-style:none;
  display:flex;
  margin:0;
  padding:0;
}

#main-header li {
  margin: 0 1rem;
}



#main-header nav a {
  color: rgb(240,200,40);
  font-size:1.25rem;
  text-decoration:none;
}


#main-header nav a:hover {
  color: rgb(165, 122, 4);
}


main h1 {
  text-align:center;
  font-size:3rem;
}

#latest-products {
  width:80%;
  margin: 2rem auto;
}

#latest-products ul {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1.25rem;
  list-style:none;
  margin:0;
  padding:0;
}


li.food-item {
  background-color:rgb(224, 216, 182);
  border-radius:.5rem;
  overflow:hidden;
}


li.food-item img {
  width:100%;
  height:240px;
  object-fit:cover;
}

.food-item-content {
  padding:0 10% 10%;
  text-align:center;
}

.food-item-content h2 {
  color:rgb(53, 39, 0);
  margin:0 0 10%;
}

a.btn {
  background-color:rgb(167, 134, 4);
  color:rgb(224, 216, 182);
  border-radius:4px;
  font-weight:bold;
  padding: 4px 10px;
}
 
a.btn:hover {
  background-color: rgb(53, 39, 0);
  color:rgb(240,200,40);
}

footer {
  position:fixed;
  bottom:0;
  background-color: rgba(0,0,0, 0.5);
  display:flex;
  justify-content:center;
  width:100%;
  margin:0;
}


footer ul {
  display:inline-flex;
  margin: 1.25rem auto;
  list-style:none;
}

footer li {
  width:100px;
  height:30px;
}

footer li img {
  height:100%;
  object-fit:fill;
}


@media (max-width: 48em) {
  main h1 {
    font-size:1.5rem;
  }
  #latest-products ul {
    grid-template-columns: 100%;
  }

  #main-header .hamburger {
    display:flex;
  }
  #main-header nav {
    display:none;
  }
}