@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/outfit/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/outfit/static/Outfit-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: bold;
}

@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/outfit/static/Outfit-Light.ttf') format('truetype');
  font-weight: lighter;
  font-style: light;
}

@font-face {
  font-family: 'young-serif';
  src: url('assets/fonts/young-serif/YoungSerif-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body{
  font-family: 'Outfit', sans-serif;
  background-color: hsl(334, 70%, 96%);
  color: hsl(24, 5%, 18%);
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.container {
  background-color: hsl(0, 0%, 100%);
  width: 50%;
  margin: 50px auto;
  max-width: 400px;
  padding: 5px 15px;
  border-radius: 10px;
}

.article {
  padding: 0;
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  
}

.article-image {
  width: 395px;
  object-fit: cover;
  text-align: center;
  border-radius: 7px;
}

.heading {
  margin: 0;
}

.content {
  font-size: .9rem;
  margin: 8px 0;
}

.preparation {
  background-color: hsl(330, 100%, 98%);
  padding: 10px 15px;
}

.preparation-heading {
  margin: 0;
  color: hsl(332, 51%, 32%);

}

ul {
  margin: 8px;
  line-height: 28px;
  padding-left: 15px;
}

li {
  font-weight: lighter;
}

span {
  font-weight: bold;
}

h3 {
  font-family: 'young-serif', sans-serif;
  font-weight: normal;
  color: hsl(14, 45%, 36%);
}

ol {
  line-height: 28px;
  padding-left: 25px;
}

.instruction-heading,
.ingredient-section,
.nutrition {
  border-bottom: 1px solid hsl(30, 18%, 87%);
  padding-bottom: 10px;
  margin: 20px 0;
}

#nutrition-heading {
  margin-bottom: 0px;
}

.nutrition{
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

.nutrition div {
  display: flex;
  flex-direction: column;
  text-align: left;
}

#nutrition > .nutrition > p {
  margin-top: 0px;
  font-weight: 800;
  color: hsl(14, 45%, 36%);
}


@media(max-width: 810px) {

  .container{
    padding: 0;
  }

  .article {
    padding: 5px 15px;
  }

  .image-container{
    margin: 0px;
    
  }
  .article-image {
    width: 100%;
    border-radius: 0px;
  }

  .heading {
    font-size: .9rem;
  }
  
  .content {
    font-size: .7rem;
  }
}