@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);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* 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: #ffffff;

  /* Font Families */
  --ff-young-serif: "Young Serif", serif;
  --ff-outfit: "Outfit", sans-serif;

  /* Text Preset 1 */
  --tp-1-font: var(--ff-young-serif);
  --tp-1-size: 2.5rem;
  --tp-1-line-height: 100%;
  --tp-1-letter-spacing: 0px;

  /* Text Preset 2 */
  --tp-2-font: var(--ff-young-serif);
  --tp-2-size: 1.75rem;
  --tp-2-line-height: 100%;
  --tp-2-letter-spacing: 0px;

  /* Text Preset 3 */
  --tp-3-font: var(--ff-outfit);
  --tp-3-weight: 600; /* SemiBold */
  --tp-3-size: 1.25rem;
  --tp-3-line-height: 100%;
  --tp-3-letter-spacing: 0px;

  /* Text Preset 4 */
  --tp-4-font: var(--ff-outfit);
  --tp-4-weight: 400; /* Regular */
  --tp-4-size: 1rem;
  --tp-4-line-height: 150%;
  --tp-4-letter-spacing: 0px;

  /* Text Preset 4 Bold */
  --tp-4-bold-font: var(--ff-outfit);
  --tp-4-bold-weight: 700; /* Bold */
  --tp-4-bold-size: 1rem;
  --tp-4-bold-line-height: 150%;
  --tp-4-bold-letter-spacing: 0px;

  /* Spacing */
  --spc-1600: 8rem; /* 128px */
  --spc-600: 3rem; /* 48px */
  --spc-500: 2.5rem; /* 40px */
  --spc-400: 2rem; /* 32px */
  --spc-300: 1.5rem; /* 24px */
  --spc-200: 1rem; /* 16px */
  --spc-150: 0.75rem; /* 12px */
  --spc-100: 0.5rem; /* 8px */
}

body {
  font-family: var(--ff-outfit);
  background-color: var(--stone-100);
  color: var(--stone-600);
  padding: var(--spc-200);
  display: flex;
  justify-content: center;
}

main {
  background-color: var(--white);
  max-width: 740px;
  border-radius: var(--spc-200);
  padding: var(--spc-400);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

main img {
  width: 100%;
  border-radius: var(--spc-150);
  margin-bottom: var(--spc-400);
}

h1 {
  font-family: var(--tp-1-font);
  font-size: var(--tp-1-size);
  line-height: var(--tp-1-line-height);
  letter-spacing: var(--tp-1-letter-spacing);
  color: var(--stone-900);
  margin-bottom: var(--spc-200);
}

h2 {
  font-family: var(--tp-2-font);
  font-size: var(--tp-2-size);
  line-height: var(--tp-2-line-height);
  letter-spacing: var(--tp-2-letter-spacing);
  font-weight: var(--tp-4-weight);
  color: var(--brown-800);
  margin: var(--spc-400) 0 var(--spc-200);
}

h3 {
  font-family: var(--tp-3-font);
  font-size: var(--tp-3-size);
  line-height: var(--tp-3-line-height);
  color: var(--rose-800);
  margin-bottom: var(--spc-200);
}

p {
  font-family: var(--tp-4-font);
  font-size: var(--tp-4-size);
  line-height: var(--tp-4-line-height);
  margin-bottom: var(--spc-200);
}

section {
  background-color: var(--rose-50);
  border-radius: var(--spc-150);
  padding: var(--spc-300);
  margin-top: var(--spc-400);
}

section ul {
  margin-top: var(--spc-150);
  padding-left: var(--spc-300);
}

section ul li {
  font-size: var(--tp-4-size);
  line-height: var(--tp-4-line-height);
  margin-bottom: var(--spc-100);
  padding-left: var(--spc-100);
  list-style: disc;
}

section ul li::marker {
  font-weight: bold;
  color: var(--rose-800);
}

ul,
ol {
  padding-left: var(--spc-300);
  margin-bottom: var(--spc-200);
}

ul li {
  font-size: var(--tp-4-size);
  line-height: var(--tp-4-line-height);
  margin-bottom: var(--spc-100);
  list-style: disc;
  padding-left: var(--spc-200);
}

ul li::marker {
  font-weight: bold;
  color: var(--brown-800);
}

ol li {
  font-size: var(--tp-4-size);
  line-height: var(--tp-4-line-height);
  margin-bottom: var(--spc-150);
  padding-left: var(--spc-100);
}

ol li::marker {
  font-weight: bold;
  color: var(--brown-800);
}

strong {
  font-family: var(--tp-4-bold-font);
  font-weight: var(--tp-4-bold-weight);
  font-size: var(--tp-4-bold-size);
  line-height: var(--tp-4-bold-line-height);
}

hr {
  margin: var(--spc-400) 0;
  border: none;
  border-top: 1px solid var(--stone-150);
}

table {
  width: 100%;
  margin-top: var(--spc-200);
  border-collapse: collapse;
}

tr {
  border-bottom: 1px solid var(--stone-150);
}

td {
  padding: var(--spc-150);
}

.table-nutrients {
  color: var(--stone-600);
  font-size: var(--tp-4-size);
}

.table-measures {
  color: var(--brown-800);
  font-family: var(--tp-4-bold-font);
  font-weight: var(--tp-4-bold-weight);
  font-size: var(--tp-4-size);
}
@media (max-width: 800px) {
  body {
    padding: var(--spc-600);
  }
}

@media (max-width: 400px) {
  body {
    padding: 0;
  }

  main img {
    border-radius: 0;
    margin: 0;
  }
}