@font-face {
  font-family: 'young serif';
  src: url(./assets/fonts/young-serif/YoungSerif-Regular.ttf);
}

@font-face {
  font-family: Outfit;
  src: url(./assets/fonts/outfit/Outfit-VariableFont_wght.ttf);
}

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

:root{
  --clr-acc-100: hsl(30, 54%, 90%);
  --clr-acc-150: hsl(30, 18%, 87%);
  --clr-acc-600: hsl(30, 10%, 34%);
  --clr-acc-900: hsl(24, 5%, 18%);


  --clr-neutral: hsl(0, 0%, 100%);

  --clr-heading:  hsl(14, 45%, 36%);
  
  --clr-bg-800: hsl(332, 51%, 32%);
  --clr-bg-050: hsl(330, 100%, 98%);

  --ff-primary: 'young serif';
  --ff-secondary: Outfit;
  
  
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-semi-bold: 600;

  --card-padding: 1rem;
  --card-boder-radius: 2rem;
  --border-radius: 1.2rem;
  --box-shadow: 0 2rem 3rem var(--clr-light);

}

/* CSS RESET */

/*----Box-sizing-rules---*/
*,
*::before,
*::after{
  box-sizing: border-box;
}

/*----Remove default margin---*/
*{
  margin: 0;
  padding: 0;
  font: inherit;
  box-sizing: border-box;
}

/*----Set core root defaults---*/
html:focus-within{
  scroll-behavior: smooth;
}

/*----Set core body defaults---*/
body{
  /* min-height: 100vh; */
  text-rendering: optimuzeSpeed;
}

/*----A elements that dont have a class get defaults---*/
a:not([class]){
  text-decoration-skip-ink: auto;			
}


/*----Make images easier to work with---*/
img, 
picture, 
svg{
 max-width: 100%;
 display: block;
}

@media (prefers-reduce-motion: reduce){
  html:focus-within{
  scroll-behavior: auto;
}

  *, 
  *::before, 
  *::after{
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
}


/* CSS RESET */

body{
  background: var(--clr-bg-050);
  font-size: 16px;
  font-family: var(--ff-secondary);
  color: var(--clr-acc-600);
}

.card-panel{
  --width: 650px;
  max-width: var(--width);
  margin-inline: auto;
  display: grid;
  align-items: center;
  justify-content: center;
  background: var(--clr-neutral);
  /* margin-top: 8rem; */
}

.primary-heading{
  font-family: var(--ff-primary);
  color: var(--clr-acc-900);
  font-size: 2rem;
  font-weight: var(--fw-regular);
} 

.preparatory{
  font-family: var(--ff-secondary);
  font-size: 1.2rem;
  font-weight: var(--fw-semi-bold);
  color: var(--clr-bg-800);
}

.secondary-headings{
  color: var(--clr-heading);
  font-size: 1.87rem;
  font-weight: 400;
  font-family: var(--ff-primary);
  line-height: 1.5;
}

.text-headings{
  font-size: 1rem;
  font-family: var(--ff-secondary);
  font-weight: var(--fw-bold);
  color: var(--clr-acc-600);
}

li::marker{color:var(--clr-bg-800); font-weight: var(--fw-semi-bold);}

.main-content{
  display: grid;
  place-items: center;
  padding: 2.5rem;
  min-height: 100vh;
}

.prepare{
  margin: 2rem 0;
  background: var(--clr-bg-050);
  padding: 1.7rem;
  border-radius: 10px;
}

.prepare ul{
  display: flex;
  flex-direction: column;
  gap: .8rem;
  margin-left: 1rem;
}

.prepare ul >li {
  padding-left: 1rem;
}

.ingredients ul{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-left: 1rem;

}

.ingredients ul >li {
  padding-left: 1rem;
}


.instructions{
  padding: 2.1rem;
  border-top: 1px solid var(--clr-acc-150);
  border-bottom: 1px solid var(--clr-acc-150);
  margin: 2.3rem 0;
}

.instructions ol{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0;
  margin-left: 1rem;
}

.instructions ol >li {
  padding-left: .7rem;
}

.nutrition .text{
  margin: 1rem 0;
}

.nutrition table{
  text-align: left;
}

.nutrition .quantity{
  font-size: 1rem;
  font-family: var(--ff-secondary);
  font-weight: var(--fw-bold);
  color: var(--clr-heading);
}
table th{
  width: 2rem;
}
/* Responsiveness */
@media only screen and (max-width: 1440px) and (min-width: 1200px){
  body{
    background: var(--clr-bg-050);
    font-size: 16px;
    font-family: var(--ff-secondary);
    color: var(--clr-acc-600);
    background-color: red;
  }

  .card-panel{
    border-radius: 12px;
    margin: 5rem auto;
  }

  .image-omelette{
    padding: 2rem 2rem .5rem 2rem;
    max-width: 100%;
  }

  .image-omelette > img{
    border-radius: 10px;
  }

  .main-content{
    padding: 1.3rem;
  }

  .prepare{
    width: 100% ;
  }
}
@media only screen and (max-width: 1200px) and (min-width: 652px){
  body{
    background-color: blue;
  }
  .card-panel{
    border-radius: 12px;
    margin: 5rem auto;
  }

  .image-omelette{
    padding: 2rem 2rem .5rem 2rem;
    max-width: 100%;
  }

  .image-omelette > img{
    border-radius: 10px;
  }

  .prepare{
    width: 100%;
  }
}


@media only screen and (max-width: 652px) and (min-width: 435px){
  .prepare{
    width: 100%;
  }
}