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

@font-face {
  font-family: "Outfit";
  src:
  url("../assets/fonts/outfit/Outfit-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 600 700;
  }

  :root{
    --color-white: hsl(0,0%, 100%);
    --color-stone-100: hsl(30,54%, 90%);
    --color-stone-150: hsl(30,18%, 87%);
    --color-stone-600: hsl(30,10%, 34%);
    --color-brown-800: hsl(14,45%,36%);
    --color-rose-800: hsl(332,51%,32%);
    --color-rose-50: hsl(330,100%,98%);
  }

  *,
    *::before,
    *::after{
      margin:0;
      padding:0;
    }

    body{
      font-size: 100%;
      background-color:var(--color-stone-100);
      padding:8rem 0;
    }

    .recipe{
      position:relative;
      left:50%;
      transform: translateX(-50%);
      background-color: var(--color-white);
      height: auto;
      width:80%;
      max-width: 46rem;
      border-radius: 1rem;
      margin-bottom: 2rem;
    }

    .recipe__figure{
      padding: 2.5rem;
    }

    .recipe__figure--image{
      position:relative;
      width:100%; 
      height: auto;
      object-fit: cover;
      border-radius: 1rem;
      margin-bottom: 2.5rem;
    }
    .recipe__header{
      font-family: young-serif, sans-serif;
    }

    .recipe__header--1{
      font-weight:400;
      font-size: clamp(1rem, 1rem + 2.5vw, 2.5rem);
    }

    .recipe__header--2{
      font-family: young-serif, sans-serif;
      font-weight:400;
      font-size: 1.75rem;
      color:var(--color-brown-800);
    }

    .recipe__header--3{
      padding: .5rem 0; 
      font-weight: 600;
      font-size: 1.25rem;
      color: var(--color-rose-800);
    }

    .recipe__introduction{
      padding-top:1.5rem;
      font-family:outfit, sans-serif;
      font-weight: 400;
      color: var(--color-stone-600);
    }

    .recipe__preparation-time{
      background-color: var(--color-rose-50);
      border-radius: 1rem;
      padding: 1.5rem;
      margin:2rem 0;
      font-family:Outfit, sans-serif;
    }

    .recipe__preparation--resume{
      padding: 0 2rem;
      list-style:disc;
      color: var(--color-stone-600);
    }

    li{
      padding:.5rem .5rem;
      color: var(--color-stone-600);
    }

    .recipe__preparation--resume li::marker{
      color: var(--color-rose-800);
      font-size: 0.8em;
    }

    .recipe__preparation--ingredients-list{
      list-style:disc;
      margin:0 1.5rem;
      font-family:Outfit, sans-serif;
    }

    .recipe__preparation--ingredients-steps{
      list-style:decimal;
      padding:0 2.5rem;
      padding-top:1.5rem;
      font-family:Outfit, sans-serif;
    }

    .recipe__preparation--ingredients-instructions::after,
    .recipe__preparation--ingredients-instructions::before{
      content: "";
      width: 100%;
      height: 1px;
      display: inline-block;
      margin:2rem 0;
      background-color: var(--color-stone-150);
    }

    .recipe__preparation--ingredients-steps li::marker{
      color: var(--color-brown-800);
      font-weight: 700;
    }

    .recipe__preparation--ingredients-list li::marker{
      color: var(--color-brown-800);
      font-weight: 700;
    }

    .recipe__preparation--nutrition{
      overflow: hidden;
    }

    .recipe__preparation-nutrition--description{
      color: var(--color-stone-600);
      padding:1.5rem 0;
      font-family:Outfit, sans-serif;
    }

    .recipe__preparation-nutrition--table{
      width: 100%;
      border-collapse:collapse;
      margin: 1rem;
      color: var(--color-stone-600);
    }

    .recipe__preparation-nutrition--table tr td:nth-child(2) {
      color: var(--color-brown-800); 
      font-weight:700;
    }

    tr{
      border-bottom: 1px solid var(--color-stone-150);
      font-family: Outfit, sans-serif;
    }

    td{
      padding: .5rem 0;
    }

    @media only screen and (max-width: 26.5625em){

      body{
        padding:0;
      }

      .recipe {
        position: absolute; 
        left: auto;
        transform: none;
        width:100%;
      }


      .recipe__figure--image{
        border-radius:0;
        display: inline-block;
      }

      .recipe__figure{
        padding:0;
      }

      figcaption{
        padding:0 2rem;
    }

  }