:root {
  --bronze: #bf6900;
  /* font-family: Fantasy; */
}

body {
  margin: auto;
  max-width: 1024px;
}

.jumbotron {
  text-align: center;
  color: white;
  border: 3px solid black;
  border-radius: 20px;
  padding: 10px;
  font-size: xx-large;
  background: var(--bronze);
}

.btn {
  cursor: pointer;
}

.title {
  font-size: 40px;
  margin-bottom: 10px;
  text-align: center;
}

.search-container {
  margin: 1.2rem 0;
  display: flex;
  justify-content: center;
  border-radius: 10px;
  font-size: large;
}
.search-recipe,
.search-btn {
  width: 30%;
  padding: 10px;
  /* rem = font size of the root elements */
  margin: 1.2rem 0;
  display: flex;
  justify-content: center;
}

.search-btn {
  width: 40px;
  background: var(--bronze);
  color: #fff;
  border: none;
  border-radius: 20px;
}

#meal {
  text-align: center;
  padding: 30px;
}
.recipe-item {
  overflow: hidden;
  box-shadow: 0 4px 21px -10px black;
  margin: 20px 0;
}

.recipe-name h3 {
  font-size: 1.4rem;
  text-transform: capitalize;
}

.recipe-name {
  margin-bottom: 3%;
}
.recipe-btn {
  text-align: center;
  color: white;
  background: var(--bronze);
  font-weight: 500;
  padding: 5px 0;
  display: block;
  width: 175px;
  margin: 5px auto;
  border-radius: 2rem;
}

.recipe-details {
  position: fixed;
  top: 50%;
  left: 50%;
  /* center recipe */
  transform: translate(-50%, -50%);
  background: var(--bronze);
  /* border-radius: 1rem; */
  width: 80%;
  height: 80%;
  display: none;
}

.showRecipe {
  display: block;
}

.recipe-details-content {
  text-align: center;
}
.close-recipe {
  position: absolute;
  right: 20px;
  font-size: 20px;
  background: white;
  border: none;
  border-radius: 50%;
  padding-top: 3px;
  top: 5px;
}
.recipe-title,
li {
  text-transform: capitalize;
  padding: 10px;
}

.recipe-instructions {
  padding: 3% 3% 0;
}
.recipe-meal-img img {
  width: 300px;
  /* height: auto; */
  margin: 0px auto;
  display: block;
  max-width: 100%;
}
footer {
  text-align: center;
}
#recipe-history-btn,
#hide-search {
  border-radius: 20px;
  border: none;
  font-size: large;
  margin-bottom: 20px;
  background: var(--bronze);
  color: white;
}