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

    /* font */
    font-size: 16px;
    font-family: 'Outfit';
    color: var(--stone-600);

    --semi-bold: 600;
    --bold: 700;

    --mesure: 60ch;
}
html{
  box-shadow: border-box;
}
body{
  background-color: hsl(30, 54%, 90%);
}
*, *::before, *::after{
  box-sizing: inherit;
  line-height: 1.5em;
}
p,li,h1, h2, h3{
  max-inline-size: var(--mesure);
}
/*change size of li*/
li + li{
  margin-block-start: 0.9em;
}
/*Changes the of heading tages */
h1, h2, h3{
  font-family: 'young Serif';
  font-weight: var(--semi-bold);
}
/*b changes the color*/
b{
  font-weight: (--bold);
}
/*The main page */
.main{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 7.5em;
}
/*Image*/
.img{
  display: flex;
  flex-direction: column;
  gap:2em;
}
/*Simple Omelette Recipe */
h1{
  color:var(--stone-900);
  font-size: 2.25em;
}
/*background color to be white*/
.recipe{
  background-color: white;
  padding: 2.5em;
  border-radius: 1.5em;
}
.imgpic{
  width: 40em;
  border-radius: 0.75em;
}
/*Preparation time*/

/*preparation will be in the middle*/
section.Preparationtime{
  background-color: var(--rose-50);
  padding: 1.8em;
}
/**/
section.Preparationtime h3, h2{
  font-family: 'Outfit';
  color:var(--rose-800);
  font-size:1.4em;
}
/**/
/* Ingredients, Instructions, Nutrition */
.recipe h2, h3{
  color: var(--brown-800);
  font-size:1.5;
}
.recipe > hr {
  border: 1px solid var(--stone-150);
  margin-block: 2em;
}
/*Nutrition*/

/*Table section*/
.id2{
  display: flex;
  flex-direction: column;
  gap:2em;
}
table.Nutrition{
  border-collapse:collapse;
}
table.Nutrition tr{
  border-block-end:1px solid var(--stone-150);
}
table.Nutrition tr:last-child{
  border:none;
}
table.Nutrition td{
padding-block: 1em;
padding-inline: 1.5em;
}
table.Nutrition strong{
  color: var(--brown-800);
}
/* it changes the size of web*/
@media (max-width: 47em) {
.recipe{
  padding: 1.7em;
  border-radius:0;
  width:100%
}
.imgpic{
  width:100%;
}
.main{
  padding-block: 0;
}
}