#content {
  /* text-align: center; */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  background-color: rgb(52, 52, 52);
  background-size: cover;
  align-items: center;
  align-self: center;
margin: 5px;
  
}

a {
  text-decoration: none;
  color: white;
}

h4 {
  margin: 5px;
  justify-content: center;
  text-align: center;
}

.step {
  display: flex;
  flex-direction: column;
  max-width: 60%;
  border: 2px;
  border-color: black;
  border-width: 2px;
  border-radius: 2px;
  border-style: solid;
  margin: auto;
  margin-bottom: 15px;
  padding-left: 20px;
  padding-right: 20px;

}


#content img {
display: flex;
justify-content: center;
justify-items: center;
align-items: center;
align-self: center;



}
#content .h3 h3{
    display: flex;
    justify-content: center;
    color: black;
}

#content h2, h3 {
color: white;
}

#content p {
color: white;
max-width: 70%;
display: flex;
justify-content: center;
align-items: center;
align-self: center;
}
div {
display: flex;
}
div.steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
}
body {
  display: flex;
  flex-direction: column;
}
div {
  display: flex;
}
img {
  display: flex;
  align-self: center;
  justify-content: center;
}
div.steps .step .stepimg img {
  display: flex;
  justify-self: center;
  margin: auto;
  padding-top: 20px;
}
div.stepimg img {
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  text-align: center;
  padding-top: 20px;
}
.steptitle {
  padding: none;
  margin: 0%;
  justify-content: center;
}


.steptext {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: large;
}

.desc {
background-color: rgb(52, 52, 52);
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
text-align: center;
color: white;


}

.desc p {
max-width: 60%;
align-self: center;
padding-bottom: 20px;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
font-size: large;
background-color: rgba(227, 186, 143, .3);

}
figure img{
display:flex;
justify-content: center;
align-self: center;
}
p {
display: flex;
max-width: max-content;
}

header {
  background-image: url(images/mise-en-plase.jpg);
  background-position: center;
}
div.ingredients img{
  max-width: 70%;
  max-height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-items: center;
  align-self: center;
}
p {
max-width: fit-content;
}

#content li {
color: black;
}

div.steps h3 {
  text-align: center;
}

h1 {
  text-align: center;
  color: white;
  margin-top: 20px;
  text-decoration: underline;
  background-color: black;
  opacity: 70%;
  
  
}

.search {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
 
}
.ingImg{
display: flex;
justify-content: center;
align-items: center;
}

figure img {
  max-width: 100%;
  display: flex;
  justify-content: center;
}

.oneRec {
  background-color: beige;
}




ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

button.search {
  padding: 5px;
  
}

div.ingredients ul {
  display: flex;
  justify-content: center;
  
 
}

.ingImg img {
display: flex;
justify-content: center;
align-items: center;
align-self: center;
}
div.input {
  display: flex;
  justify-content: left;
}


li {
  padding: 10px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 10px;
  padding-bottom: 10px;
  border: 2px;
  border-color: black;
  border-style: solid;
  background-color: white;
}

footer li .foot {
  padding: 20px;
  border: none;
  border-color: white;
  border-style: none;
}
footer{
  background-color: rgb(97, 95, 95);
}

footer h3 {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  color: azure;
}

button {
  padding: 20px;
  padding-left: 40px;
  padding-right: 40px;
  margin: 10px;
  background-color: rgb(52, 52, 52);
  color: white;


}
header h3{
 text-align: center;
 color: white;
 text-shadow: 2px 2px  rgb(52, 52, 52);
 background-color: rgba(227, 186, 143, .7);
 background-size: contain;
}



button:hover {
  cursor: pointer;
}






div.ingredients h3 {
  text-align: center;
  color: black;
}

/* @media screen and (max-width: 850px) {
  div.ingredients img {
    content: url(images/OrangeChickenIngredients-small.png); 
    max-height: 300px;
  }
} */
ol{
  list-style: none;
}


@media screen and (max-width: 850px) {
  div.ingredients {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.steps p {
  display: flex;
  padding: 20px;
}
.steps {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.ingredients img {
  content: center;
}

ol li img {
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  justify-items: center;
  text-align: center;
  float: center;

}

.steps li {
  max-width: 40%;
}

ol {
 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
justify-content: center;
}
.heading{
  display: flex;
}

div.heading h3 {
  display: flex;
  justify-content: center;
  justify-self: center;
  align-items: center;
  color: black;
  text-align: center;
  margin: auto;
  padding: 20px;
}

@media screen and (max-width: 850px) {
  ol {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width: 850px) {
  .steps li {
    max-width: 80%;
  }
}

@media screen and (min-width: 1337px) {
  ol li img {
    padding-left: 20px;
  }
}
@media screen and (max-width: 850px) and (min-width: 746px) {
  ol li img {
    padding-left: 30px;
}