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

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

:root {
  --color-white: hsl(0, 0%, 100%);

  --color-stone-light-1: hsl(30, 54%, 90%);
  --color-stone-light-2: hsl(30, 18%, 87%);
  --color-stone-dark-1: hsl(30, 10%, 34%);
  --color-stone-dark-2: hsl(24, 5%, 18%);

  --color-brown: hsl(14, 45%, 36%);

  --color-rose-light: hsl(330, 100%, 98%);
  --color-rose-dark: hsl(332, 51%, 32%);

  --default-font-size: 1.6rem;

  --base-padding: 4.5rem;
  --recipe-border-radius: 2rem;
  --border-radius: 1rem;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  background-color: var(--color-stone-light-1);
  font-family: 'outfit', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  padding: 8rem 0;
}

/* GENERAL STYLES */

p,
li,
td {
  color: var(--color-stone-dark-1);
  font-size: var(--default-font-size);
}

ul,
ol {
  padding-left: 3rem;
}

li {
  padding-left: 1.5rem;
}

li::marker {
  color: var(--color-brown);
}

li:not(:last-child) {
  margin-bottom: 1rem;
}

.heading-primary,
.heading-secondary {
  font-family: 'young-serif';
  font-weight: 400;
}

.heading-primary {
  font-size: 5rem;
  margin-bottom: 1rem;
}

.heading-secondary {
  font-size: 3.5rem;
  color: var(--color-brown);
  margin-bottom: 2rem;
}

.heading-tertiary {
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--color-rose-dark);
  margin-bottom: 1.5rem;
}

.recipe-ingredients,
.recipe-instructions {
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--color-stone-light-2);
}

.recipe-img,
.recipe-cooking-time {
  border-radius: var(--border-radius);
}

.item-title {
  font-weight: 700;
}

.recipe-instructions,
.recipe-nutrition {
  margin-top: 3rem;
}

/* MAIN */
.recipe {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--base-padding);
  border-radius: var(--recipe-border-radius);
  background-color: var(--color-white);
}

.recipe-img {
  max-width: 100%;
}

.recipe-title {
  margin: 2.5rem 0;
}

.recipe-cooking-time {
  background-color: var(--color-rose-light);
  padding: 3rem;
  margin: 4rem 0;
}

.recipe-cooking-time ul li::marker {
  color: var(--color-rose-dark);
}

.instructions-list li::marker {
  font-weight: 600;
}

.recipe-instructions ol li {
  font-size: 2rem;
}

.nutrition-table {
  width: 100%;
  font-size: 2rem;
  margin-top: 3rem;
  border-collapse: collapse;
}

.nutrition-table td {
  padding: 1rem 0;
  padding-left: 3rem;
  border-bottom: 1px solid var(--color-stone-light-2);
}

.nutrition-table tr:last-child td {
  border-bottom: none;
}

.nutrition-value {
  color: var(--color-brown);
  font-weight: 600;
}

@media screen and (max-width: 23.45em) {
  html {
    font-size: 50%;
  }

  body {
    padding: 3rem 0;
  }

  .recipe-img {
    border-radius: 0;
  }

  .heading-primary {
    font-size: 4rem;
  }

  .recipe {
    padding: 3rem;
  }
}