@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap');

:root {
  /* STYLE GUIDE */

  /* COLORS */

  /* Rose */
  --rose-800: #7A284E;
  --rose-50: #FFF7FB;

  /* Stone */
  --stone-900: #312E2C;
  --stone-600: #5F564D;
  --stone-150: #E3DDD7;
  --stone-100: #F3E5D7;

  /* Brown */
  --brown-800: #854632;

  /* White */
  --white: #FFF;

  /* TYPOGRAPHY */

  /* font size */
  --text-preset-1-mobile-size: 3.6rem;
  --text-preset-1-size: 4rem;
  --text-preset-2-size: 2.8rem;
  --text-preset-3-size: 2rem;
  --text-preset-4-size: 1.6rem;
  --text-preset-4-bold-size: 1.6rem;

  /* line height */
  --text-preset-1-line-height: 100%;
  --text-preset-2-line-height: 100%;
  --text-preset-3-line-height: 100%;
  --text-preset-4-line-height: 150%;
  --text-preset-4-bold-line-height: 150%;

  /* SPACING */

  --1600: 12.8rem;
  --600: 4.8rem;
  --500: 4rem;
  --400: 3.2rem;
  --300: 2.4rem;
  --200: 1.6rem;
  --150: 1.2rem;
  --100: 0.8rem;
}

html {
  font-size: 10px;
  letter-spacing: 0;
}

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

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card {
  max-width: 60em;
}

.text-content {
  display: flex;
  flex-direction: column;
  gap: var(--400);
  padding: var(--500) var(--400);
}

.text-content .title {
  display: grid;
  gap: var(--400);
}

.title h1 {
  font-family: "Young Serif", serif;
  font-weight: 400;
  font-size: var(--text-preset-1-mobile-size);
  line-height: var(--text-preset-1-line-height);
}

.title p {
  font-family: "Outfit", sans-serif;
  font-weight: 400;
  font-size: var(--text-preset-4-size);
  line-height: var(--text-preset-4-line-height);
  color: var(--stone-600);
}

.preparation {
  display: flex;
  flex-direction: column;
  gap: var(--200);
  padding: var(--300);
  border-radius: var(--150);
  background-color: var(--rose-50);
}

.preparation h3 {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: var(--text-preset-3-size);
  line-height: var(--text-preset-3-line-height);
  color: var(--rose-800);
}

.preparation ul {
  display: flex;
  flex-direction: column;
  gap: var(--100);
}

.preparation ul li {
  font-family: "Outfit", sans-serif;
  color: var(--stone-600);
  font-size: var(--text-preset-4-size);
  line-height: var(--text-preset-4-line-height);
  font-weight: normal;
  margin-left: var(--300);
  padding: 0 0 0 var(--200);
}

.preparation ul li span {
  font-weight: 700;
}

.preparation li::marker {
  color: var(--rose-800);
}

.ingredients {
  display: flex;
  flex-direction: column;
  gap: var(--300);
}

.ingredients h2 {
  font-family: "Young Serif", serif;
  font-weight: 400;
  font-size: var(--text-preset-2-size);
  color: var(--brown-800);
}

.ingredients ul {
  display: flex;
  flex-direction: column;
  gap: var(--100);
}

.ingredients ul li {
  margin-left: var(--300);
  padding: 0 0 0 var(--200);
  font-family: "Outfit", sans-serif;
  font-weight: 400;
  font-size: var(--text-preset-4-size);
  line-height: var(--text-preset-4-line-height);
  color: var(--stone-600);
}

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

.line {
  width: 100%;
  height: 1px;
  background-color: var(--stone-150);
}

.instructions {
  display: flex;
  flex-direction: column;
  gap: var(--300);
}

.instructions h2 {
  font-family: "Young Serif", serif;
  font-weight: 400;
  font-size: var(--text-preset-2-size);
  color: var(--brown-800);
}

.instructions-container {
  display: flex;
  flex-direction: column;
  gap: var(--100);
}

.instructions-container .instructions-box {
  display: flex;
  flex-direction: row;
  gap: var(--200);
  padding: 0 0 0 var(--100);
  font-family: "Outfit", sans-serif;
  color: var(--stone-600);
  line-height: var(--text-preset-4-line-height);
  font-size: var(--text-preset-4-size);
  font-weight: 400;
}

.instructions-box span {
  font-weight: bold;
}

.instructions-box span:not(.names) {
  color: var(--brown-800);
}

.nutrition {
  display: flex;
  flex-direction: column;
  gap: var(--300);
}

.nutrition h2 {
  font-family: "Young Serif", serif;
  font-weight: 400;
  font-size: var(--text-preset-2-size);
  color: var(--brown-800);
}

.nutrition p {
  font-family: "Outfit", sans-serif;
  color: var(--stone-600);
  line-height: var(--text-preset-4-line-height);
  font-size: var(--text-preset-4-size);
  font-weight: normal;
}

.nutrition td {
  font-family: "Outfit", sans-serif;
  color: var(--stone-600);
  line-height: var(--text-preset-4-line-height);
  font-size: var(--text-preset-4-size);
  font-weight: normal;
  padding-left: var(--400);
  border-bottom: 1px solid var(--stone-150);
}

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

.nutrition .bold {
  padding-left: 0;
  padding-left: var(--200);
  padding-right: var(--400);
  font-weight: bold;
  color: var(--brown-800);
}

@media screen and (min-width: 37.5em) {
  body {
    background-color: var(--stone-100);
    padding: var(--1600) var(--600);
  }

  .card {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border-radius: var(--300);
    padding: var(--500);
    gap: var(--500);
  }

  .card .top-image {
    border-radius: var(--150);
  }

  .text-content {
    padding: 0;
  }
}