@import url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
html {
    padding:none;
    margin:none;
}

body{
    background-color: hsl(30, 54%, 90%);
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    font-family: outfit;
    color: hsl(30, 10%, 34%)
}

main {
padding: 25px;
margin:auto;
width: 80%;
border-radius: 20px;
background-color: hsl(0, 0%, 100%);
}

img {
    width:100%;
    border-radius:10px;
}

p {
    font-size: 16px;
    color:hsl(30, 10%, 34%);
    font-family: outfit;
    margin:25px 0px 25px 0px;
    line-height: 25px;
}

.prep {
    background-color:hsl(330, 100%, 98%);
    border-radius:10px;
    padding: 15px;
    font-family: outfit;
}

.prep-time {
    color:hsl(332, 51%, 32%);
    font-size: 20px;
    font-weight:500;
}

h1 {
  font-family: "Young Serif", serif;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  justify-content: center;
  margin:auto;

}

h2 {
    color: hsl(14, 45%, 36%);
}

strong {
    color:hsl(30, 10%, 34%);
    font-weight: 600;
}


span {
  /* margin-left: 20px; */
}

/* list styles */

ul ::marker {
    color:hsl(332, 51%, 32%);
}

ol ::marker {
    color:hsl(332, 51%, 32%);
}

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 20px;
    width: 75%;
}

ol {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 20px;
    width: 75%;

}

li {
    line-height: 40px;
    text-align: left;
    padding-left: 30px;
}


.section-title {
    font-family: "Young Serif", serif;
}

.ingredients-section {
    border-bottom: solid hsl(30, 18%, 87%) 1px;
}

.instructions-section {
     border-bottom: solid hsl(30, 18%, 87%) 1px;
}

.container {
    text-align: left;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.child-container {
    display:flex;
    flex-direction:row;
    text-align: left;
    padding: 10px;
    border-bottom: solid black 1px;
    width: 100%;
}

.child-container > div {
  flex: 1;
  text-align: left;
}

.measure {
    color: hsl(332, 51%, 32%);
    font-weight: 700;
}