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

body{
    overflow-x: hidden;
    max-width: 100vw;
}

.top-image > img{
    width: 100vw;
    height: 20vh; 
}


.Omelette-Recipe{
    margin: 40px 30px;
}

.title-container > .Recipe-title{
    font-size: 2rem;
    font-family: "Young Serif", serif;
    font-weight: 560;
    color: hsl(24, 5%, 18%);
    line-height: 33px;
}

.title-Desc{
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    padding: 25px 0px;
    color: hsl(30, 10%, 34%);
}

.Preparation-time{
    background-color: hsl(330, 100%, 98%);
    padding: 25px 0px;
    border-radius: 10px;
}

.Preparation-time > h3{
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: hsl(332, 51%, 32%);
    padding: 0px 0px 10px 20px;
}

.Preparation-time > ul .pt-span{
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-size: 1.03rem;
    color: hsl(24, 5%, 18%);
    padding: 10px 0px 10px 10px;
}

.Preparation-time > ul li{
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: hsl(30, 10%, 34%);
}

.Preparation-time > ul{
    display: flex;
    flex-direction: column;
    padding-left: 35px;
    gap: 10px;
}

.Ingredients{
    margin: 40px 30px;
    padding-bottom: 50px;
    border-bottom: 1px solid hsl(30, 18%, 87%);
}

.Ingredients > .ul-ingredients{
    margin-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 15px;
} 

.Ingredients > .ul-ingredients li{
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: hsl(30, 10%, 34%);
    padding-left: 15px;
}

.Ingredients > h2{
    font-size: 1.8rem;
    font-family: "Young Serif", serif;
    font-weight: 560;
    color: hsl(14, 45%, 36%);
    padding-bottom: 20px;
}

.Instructions{
    margin: 40px 30px;
    padding-bottom: 50px;
    border-bottom: 1px solid hsl(30, 18%, 87%);
}

.Instructions > h2{
    font-size: 1.8rem;
    font-family: "Young Serif", serif;
    font-weight: 560;
    color: hsl(14, 45%, 36%);
    padding-bottom: 20px;
}

.Instructions > .ol-instructions{
    margin-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 15px;
} 

.Instructions > .ol-instructions .oli-span{
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-size: 1.03rem;
    color: hsl(24, 5%, 18%);
}

.ol-instructions > li{
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: hsl(30, 10%, 34%);
}

.Instructions > .ol-instructions li{
    font-family: "Outfit", sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: hsl(30, 10%, 34%);
    padding-left: 15px;
}

.ol-instructions > li::marker{
    color: hsl(14, 45%, 36%);
}

.Nutrition{
    margin: 40px 30px 20px 30px;
    padding-bottom: 20px;
}

.Nutrition > .container-Nutrition > h2{
    font-size: 1.8rem;
    font-family: "Young Serif", serif;
    font-weight: 560;
    color: hsl(14, 45%, 36%);
    padding-bottom: 20px;
}

.Nutrition > .container-Nutrition > p{
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    padding-bottom: 20px;
    margin-right: 20px;
    color: hsl(30, 10%, 34%);
}

.Nutrition > .container-Nutrition > table{
    border-collapse: collapse;
}

.Nutrition > .container-Nutrition > table th{
    color: hsl(14, 45%, 36%);
}

.Nutrition > .container-Nutrition > table td{
    color: hsl(30, 10%, 34%);
    padding-right: 60px;
}

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

  .attribution{
    border-top: 1px solid gray;
    padding: 5px 0px;
  }


  @media screen and (max-width: 400px) {

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

  @media screen and (min-width: 401px) and (max-width: 1022px) {
    table > tbody{
        display: flex;
        flex-wrap: wrap;
        row-gap: 20px;
    }

    .top-image > img{
        width: 100vw;
        height: 50vh; 
    }
  }

  @media screen and (min-width: 1023px){
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    body{
        overflow-x: hidden;
        max-width: 100vw;
        background-color: hsl(330, 100%, 98%);
    }
    

    .top-image > img{
        width: 436px;
        height: 180px;
        margin: 0px 32px;
        border-radius: 10px;
    }
    
    
    .Omelette-Recipe{
        margin: 40px 30px;
    }
    
    .title-container > .Recipe-title{
        font-size: 2rem;
        font-family: "Young Serif", serif;
        font-weight: 560;
        color: hsl(24, 5%, 18%);
        line-height: 33px;
    }
    
    .title-Desc{
        font-family: "Outfit", sans-serif;
        font-weight: 400;
        font-size: 1rem;
        padding: 25px 0px;
        color: hsl(30, 10%, 34%);
    }
    
    .Preparation-time{
        background-color: hsl(330, 100%, 98%);
        padding: 25px 0px;
        border-radius: 10px;
    }
    
    .Preparation-time > h3{
        font-family: "Outfit", sans-serif;
        font-weight: 700;
        font-size: 1.3rem;
        color: hsl(332, 51%, 32%);
        padding: 0px 0px 10px 20px;
    }
    
    .Preparation-time > ul .pt-span{
        font-family: "Outfit", sans-serif;
        font-weight: 600;
        font-size: 1.03rem;
        color: hsl(24, 5%, 18%);
        padding: 10px 0px 10px 10px;
    }
    
    .Preparation-time > ul li{
        font-family: "Outfit", sans-serif;
        font-weight: 600;
        font-size: 1rem;
        color: hsl(30, 10%, 34%);
    }
    
    .Preparation-time > ul{
        display: flex;
        flex-direction: column;
        padding-left: 35px;
        gap: 10px;
    }
    
    .Ingredients{
        margin: 40px 30px;
        padding-bottom: 50px;
        border-bottom: 1px solid hsl(30, 18%, 87%);
    }
    
    .Ingredients > .ul-ingredients{
        margin-left: 22px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    } 
    
    .Ingredients > .ul-ingredients li{
        font-family: "Outfit", sans-serif;
        font-weight: 600;
        font-size: 1rem;
        color: hsl(30, 10%, 34%);
        padding-left: 15px;
    }
    
    .Ingredients > h2{
        font-size: 1.8rem;
        font-family: "Young Serif", serif;
        font-weight: 560;
        color: hsl(14, 45%, 36%);
        padding-bottom: 20px;
    }
    
    .Instructions{
        margin: 40px 30px;
        padding-bottom: 50px;
        border-bottom: 1px solid hsl(30, 18%, 87%);
    }
    
    .Instructions > h2{
        font-size: 1.8rem;
        font-family: "Young Serif", serif;
        font-weight: 560;
        color: hsl(14, 45%, 36%);
        padding-bottom: 20px;
    }
    
    .Instructions > .ol-instructions{
        margin-left: 22px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    } 
    
    .Instructions > .ol-instructions .oli-span{
        font-family: "Outfit", sans-serif;
        font-weight: 600;
        font-size: 1.03rem;
        color: hsl(24, 5%, 18%);
    }
    
    .ol-instructions > li{
        font-family: "Outfit", sans-serif;
        font-weight: 600;
        font-size: 1rem;
        color: hsl(30, 10%, 34%);
    }
    
    .Instructions > .ol-instructions li{
        font-family: "Outfit", sans-serif;
        font-weight: 500;
        font-size: 1rem;
        color: hsl(30, 10%, 34%);
        padding-left: 15px;
    }
    
    .ol-instructions > li::marker{
        color: hsl(14, 45%, 36%);
    }
    
    .Nutrition{
        margin: 40px 30px 20px 30px;
        padding-bottom: 20px;
    }
    
    .Nutrition > .container-Nutrition > h2{
        font-size: 1.8rem;
        font-family: "Young Serif", serif;
        font-weight: 560;
        color: hsl(14, 45%, 36%);
        padding-bottom: 20px;
    }
    
    .Nutrition > .container-Nutrition > p{
        font-family: "Outfit", sans-serif;
        font-weight: 400;
        font-size: 1rem;
        padding-bottom: 20px;
        margin-right: 20px;
        color: hsl(30, 10%, 34%);
    }
    
    .Nutrition > .container-Nutrition > table{
        border-collapse: collapse;
    }
    
    .Nutrition > .container-Nutrition > table th{
        color: hsl(14, 45%, 36%);
    }
    
    .Nutrition > .container-Nutrition > table td{
        color: hsl(30, 10%, 34%);
        padding-right: 150px;
    }
    
    th, td {
        border-bottom: 1px solid hsl(30, 18%, 87%);
        padding: 20px 100px 20px 35px;
      }
    
      .attribution{
        border-top: 1px solid gray;
        padding: 5px 0px;
      }
    
      
    .mediagrid{
      width: 500px;
      background-color: white;
      margin: 50px auto;
      padding: 20px 0px;
      border-radius: 10px;
    }

  }