:root{
   --div-background-color: hsl(0, 0%, 100%);
   --p-color: hsl(30, 10%, 34%);
   --h1-color: hsl(24, 5%, 18%);
   --subtitle-color: hsl(14, 45%, 36%);
   --subtitle-time-color: hsl(332, 51%, 32%);
   --section-time-background: hsl(330, 100%, 98%);
}


*{
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}

body{
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin: 90px 0;
}

section,hr{
   width: 80%;
   display: flex;
   flex-direction: column;
   gap: 15px;
}

ul,li{
   list-style-position: inside;
}

.container-recipe{
   width:100%;
   max-width: 400px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 25px;
}

.recipe-img{
   width: 100%;
}


.recipe-title{
   font-size: 40px;
   color: var(--h1-color);
}

.recipe-descripcion{
   color: var(--p-color);
   font-size: 17px;
}

.recipe-preparation{
   background-color: var(--section-time-background);
   padding: 25px;
}

.recipe-time{
   color: var(--subtitle-time-color);
   font-size: 20px;
}

.list-time{
   list-style: none;
}

.list-time li {
   margin-bottom: 15px;
   position: relative;
   padding-left: 1.2em;
   font-size: 18px;
   color: var(--p-color);
}

.list-time li::before{
   content: "•";
   position: absolute;
   left: 0;
   top: 0.2en;
   color: var(--p-color);
   font-size: 1em;
}

.subtitle{
   color: var(--subtitle-color);
   font-size: 30px;
}

.ingredients-list{
   display: flex;
   flex-direction: column;
   gap: 12px;
   list-style: none;
}

.ingredients-list li{
   position: relative;
   padding-left: 1.2em;
   font-size: 18px;
   color: var(--p-color);
}

.ingredients-list li::before{
   content: "•";
   position: absolute;
   left: 0;
}

.instructions-list{
   counter-reset: step;
   list-style: none;
   padding-left: 0;
}

.instructions-list li{
   counter-increment: step;
   position: relative;
   padding-left: 2em;
   margin-bottom: 10px;
   font-size: 18px;
   color: var(--p-color);
}

.instructions-list li::before{
   content: counter(step) ".";
   position: absolute;
   left: 0;
   top: 0;
   font-weight: bold;
   color: var(--subtitle-color);
}

.recipe-nutrition p{
   color: var(--p-color);
   font-size: 18px;
}

.nutrient{
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 1em;
}

td{
   padding: 12px;
   border-bottom: 1px solid hsl(30, 18%, 87%);
}

.aportes{
   font-weight: 500;
   color: var(--p-color);
}

.values{
   font-weight: 600;
   color: var(--subtitle-color);
}

@media (min-width:375px) {

   body{
      background-color: hsl(30, 54%, 90%);
   }

   section,hr{
      width: 100%;
   }

   .container-recipe{
      max-width: 100%;
      padding: 30px;
      background-color: var(--div-background-color);
      border-radius: 5px;
   }

   .recipe-img{
      width: 100%;
      border-radius: 15px;
   } 
}

@media (min-width:650px) {
   .container-recipe{
      max-width: 80%;
      width: 45%;
   }
}