/* start variabels */
:root {
  --cardColor: #ffffff;
  --mainColor: #f3e6d8;
  --hrColor: #e4ded8;
  --pColor: #5f574e;
  --headingColor: #302d2c;
  --h-bring: #854632;
  --head-H-frist-section: #7b284f;
  --sectionFirstcolor: #fff5fa;
}
/* end variabels */
/* fonts */
@font-face {
  font-family: "Young-serif";
  src: url("../assets/fonts/young-serif/YoungSerif-Regular.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "outfit";
  src: url("../assets/fonts/outfit/Outfit-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* start global values */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.margin-block {
  margin-block-end: 24px;
}
.margin-inline-start-li {
  margin-inline-start: 20px;
}
.margin-block-h-end {
  margin-block-end: 8px;
}
.margin-block-h {
  margin-block-end: 8px;
}
.h-bring {
  color: var(--h-bring, #854632);
}
.head-of-p {
  font-weight: 700;
}
.marker-size::marker {
  font-size: 12px;
}
.margin-block-start {
  margin-block-start: 24px;
}
.margin-block-end {
  margin-block-end: 12px;
}
.color-list {
  color: var(--pColor, #5f574e);
}
.header-of-article {
  font-family: "Young-serif", system-ui, serif;
}
.size-heading {
  font-size: clamp(34px, 2vw, 40px);
}
.line-height {
  line-height: 1.5;
}
.head-of-nurtition {
  color: var(--pColor, #302d2c);
  font-weight: 400;
}
hr {
  border: 1px solid var(--hrColor, #e4ded8);
}
.margin-h-block-top {
  margin-block-start: 12px;
}
.padding {
  margin-inline: 2rem;
}
body {
  font-family: "outfit", system-ui, serif;
  min-height: 100vh;
}
/* end global values */
/* recipe design mobile */
.recipe-page {
  background-color: var(--cardColor, #fff5fa);
  h1 {
    color: var(--headingColor, #302d2c);
    font-size: clamp(35px, 5vw, 38px);
  }
  p {
    color: var(--pColor, #5f574e);
  }
  .img-sandwatch {
    width: 100%;
    display: block;
    margin-block-end: 24px;
  }
}
/* first-section */
.Preparation-time {
  background-color: var(--sectionFirstcolor, #fff5fa);
  padding: 2rem;
  border-radius: 10px;
  .header-of-article-d {
    color: var(--hsead-H-frist-section, #7b284f);
    font-size: 1.5rem;
  }
}
.first-section-ul {
  margin-block-start: 12px;
  padding-inline-start: 1.2rem;
  li {
    margin-block-end: 8px;
    padding-inline-start: 1rem;
  }
  li::marker {
    color: var(--head-H-frist-section, #7b284f);
  }
}
/*second section */
.second-section-ul {
  margin-block-start: 12px;
  padding-inline-start: 1.2rem;
  li {
    margin-block-end: 8px;
    padding-inline-start: 1rem;
  }
  li::marker {
    color: var(--h-bring, #854632);
  }
}
/* third section */
ol {
  margin-block-start: 12px;
  padding-inline-start: 1.2rem;
  li {
    margin-block-end: 8px;
    padding-inline-start: 1rem;
  }
  li::marker {
    color: var(--h-bring, #854632);
    font-weight: 700;
  }
}
/* four */
.Nutrition {
  .of-body {
    display: flex;
    align-items: center;
    padding-inline-start: 1.2rem;
  }
  .head-of-nurtition + p {
    color: var(--h-bring, #854632);
    font-weight: 700;
  }
}
.body-of-Nutrition {
  margin-block-start: 24px;
}
.attribution {
  display: none;
}
/* media ifor desktop */
@media (min-width: 80rem) {
  body {
    background-color: var(--mainColor, #f3e6d8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-block: 6rem;
  }
  main {
    inline-size: 700px;
    padding-block-end: 2rem;
  }
  .padding {
    margin-inline: 0;
  }
  .recipe-page {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    padding: 2.5rem;
  }

  .Nutrition {
    .of-body {
      gap: 50%;
    }
  }
  .img-sandwatch {
    border-radius: 10px;
  }
  .attribution {
    display: block;
  }
}