/* *============== prepare ================ */
:root{
    box-sizing: border-box;
}
@font-face {
  font-family: "Young-serif";
  src: url("./assets/fonts/young-serif/YoungSerif-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

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

/* *============== common ================ */
body {
  background-color: hsl(30, 54%, 90%);
  font-size: 16px;
  font-family: "outfit", sans-serif;
  max-width: 1440px;
}

.container {
  background-color: #fff;
  padding: 28px;
  border-radius: 15px;
  max-width: 700px;
  overflow: hidden;
  margin: 70px auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h2 {
  color: hsl(14, 45%, 36%);
  font-family: 'young-serif';
  font-weight: 300;
}

.ingredient,
.instruction {
  border-bottom: solid 1px hsl(30, 18%, 87%);
}

/* *============== heading ================ */
.heading img {
  width: 100%;
  display: block;
  border-radius: 15px;
}

h1 {
  font-family: "Young-serif", serif;
  font-weight: 500;
}

p {
  font-family: "outfit", sans-serif;
  color: hsl(30, 10%, 34%);
  font-weight: 500;
}

/* *============== prepare ================ */

.Prepare{
    margin-top: 40px;
    background-color: hsl(330, 100%, 98%);
    border-radius: 15px;
    padding: 20px 28px;
}

.Prepare h3{
    color: hsl(332, 51%, 32%);
    margin-bottom: 12px;
}

.Prepare ul{
    padding-left: 20px;
}

.Prepare li{
    color: hsl(30, 10%, 34%);
    margin-bottom: 12px;
    padding-left: 15px;
}

.Prepare li::marker{
    color: hsl(332, 51%, 32%);
    font-size: 0.8em;
}

/* *============== ingredient ================ */



.ingredient ul{
    color: hsl(30, 10%, 34%);
    margin-bottom: 30px;
    padding-left: 20px;
}

.ingredient li{
    margin-bottom: 12px;
    padding-left: 20px;
}

.ingredient li::marker{
    color: hsl(14, 45%, 36%);
    font-size: 0.8em;
}

/* *============== instructions ================ */


.instruction ol{
    color:hsl(30, 10%, 34%);
    /* list-style-position: outside; */
    padding-left: 20px;
    margin-bottom: 30px;
    
}

.instruction li{
    text-indent: 0;
    margin-bottom: 15px;
    padding-left: 20px;
}

.instruction ol li::marker{
    color:hsl(14, 45%, 36%);
    font-weight: bold;
}
/* *============== nutrition ================ */
.nutrition table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 18px;
}

.nutrition tr{
    border-top: 1px solid hsl(30, 18%, 87%);
}

.nutrition tr:first-child{
    border-top: none;
}

.nutrition td{
    padding: 14px 0 14px 32px;
    color:hsl(30, 10%, 34%);
}

.nutrition td:last-child{
    color:hsl(14, 45%, 36%);
    font-weight: 700;
}