* {
  box-sizing: border-box;
}

html {
  background-image: url("../images/slate_food_background.jpeg");
  background-size: cover;
  background-attachment: fixed;
}

main {
  margin-top: 20px;
}

header {
  display: flex;
  padding: 0 20px;
  background-color: rgb(0, 165, 25);
  color: white;
  border: 1px solid red;
}

.brand-logo {
  margin-left: 10px;
  font-size: larger;
}

#nav-mobile {
  padding-right: 10px;
}

.btn {
  background-color: grey;
  color: white;
}

.search-btn {
  display: flex;
  align-items: center;
  font-size: 2vw;
}

#searchBox {
  /* border: 1px solid red; */
  margin: 0px;
}

#searchFilters {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  justify-content: start;
  align-items: flex-start;
  /* border: 1px solid red; */
}

#dataDisplay {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 22px 22px 20px 0;
  margin: 0px;
}

#favesList li {
  margin-bottom: 5px;
}

/* set this attribute in javascript when dynamically created */
.recipe-card {
  margin: 20px;
}

.calories {
  display: flex;
  flex-direction: row;
}

@media screen and (max-width: 992px) {
  #searchFilters {
    overflow: scroll;
  }
}