:root {
  /* colors */
  --color-rose-800: #7a284e;
  --color-rose-50: #fff7fb;
  --color-stone-900: #312e2c;
  --color-stone-600: #5f564d;
  --color-stone-150: #e3ddd7;
  --color-stone-100: #f3e5d7;
  --color-brown-800: #854632;
  --color-white: #ffffff;

  /* Font */
  --font-family-preset1: "Young Serif", serif;
  --font-size-preset1: 2.5rem; /* 40px */

  --font-family-preset2: "Young Serif", serif;
  --font-size-preset2: 1.75rem; /* 28px */

  --font-family-preset3: "Outfit", sans-serif;
  --font-size-preset3: 1.25rem; /* 20px */
  --font-weight-preset3: 600;

  --font-family-preset4: "Outfit", sans-serif;
  --font-weight-preset4: 400;
  --font-size-preset4: 1; /* 16px */

  --font-family-preset4-bold: "Outfit", sans-serif;
  --font-weight-preset4-bold: 700;
  --font-size-preset4-bold: 1; /* 16px */

  /* line height */
  --line-height-preset1: 100%;
  --line-height-preset2: 100%;
  --line-height-preset3: 100%;
  --line-height-preset4: 150%;
  --line-height-preset4-bold: 150%;

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

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

html {
  height: 100%;
  width: 100%;
}

body {
  width: 100%;
}

main {
  width: 100%;
}

img {
  width: 100%;
}

.content {
  padding: var(--spacing-500) var(--spacing-400);
}

h1 {
  margin: 0 auto;
  text-align: start;
  font-family: var(--font-family-preset1);
  font-size: var(--font-size-preset1);
  line-height: var(--line-height-preset1);
  font-style: normal;
  color: var(--color-stone-900);
  margin-bottom: var(--spacing-300);
}

p {
  font-family: var(--font-family-preset4);
  font-size: var(--font-size-preset4);
  line-height: var(--line-height-preset4);
  font-weight: var(--font-weight-preset4);
  color: var(--color-stone-600);
  margin-bottom: var(--spacing-400);
}

.preparation-box {
  width: 82.7%;
  max-width: 400px;
  margin-bottom: var(--spacing-400);
  background-color: var(--color-rose-50);
  padding: var(--spacing-300);
}

h3 {
  color: var(--color-rose-800);
  font-family: var(--font-family-preset3);
  font-size: var(--font-size-preset3);
  line-height: var(--line-height-preset3);
  font-weight: var(--font-weight-preset3);
  margin-bottom: var(--spacing-200);
}

.preparation-box ul,
ol {
  line-height: var(--line-height-preset4);
  padding-left: var(--spacing-200);
}

ol li {
  padding-left: var(--spacing-100);
}

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

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

li {
  color: var(--color-stone-600);
  font-family: var(--font-family-preset4);
  font-size: var(--font-size-preset4);
  line-height: var(--line-height-preset4);
  font-weight: var(--font-weight-preset4);
  /* padding-left: var(--spacing-300); */
}

ul li:not(:last-child),
ol li:not(:last-child) {
  margin-bottom: 0.5rem;
}

h2 {
  color: var(--color-brown-800);
  font-family: var(--font-family-preset2);
  font-size: var(--font-size-preset2);
  line-height: var(--line-height-preset2);
  margin-bottom: var(--spacing-300);
}

.ingredients {
  padding-left: var(--spacing-200);
  line-height: var(--line-height-preset4);
}

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

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

.stone {
  color: var(--color-stone-600);
  font-family: var(--font-family-preset4);
  font-size: var(--font-size-preset4);
  font-weight: var(--font-weight-preset4);
  text-align: center;
}

.brown {
  color: var(--color-brown-800);
  font-family: var(--font-family-preset4-bold);
  font-size: var(--font-size-preset4-bold);
  font-weight: var(--font-weight-preset4-bold);
  text-align: left;
}

.row {
  display: grid;
  grid-template-columns: 35% 65%; /* Control widths precisely */
  align-items: start;
  margin: 0px 0px var(--spacing-150) 0px;

  column-gap: 2rem;
}

.table hr {
  border: none;
  border-top: 1px solid var(--color-stone-150);
  margin: 0 0 var(--spacing-150) 0;
}

.attribution {
  color: var(--color-stone-600);
  font-family: var(--font-family-preset4);
  font-size: var(--font-size-preset4);
  font-weight: var(--font-weight-preset4);
  text-align: center;
}

.attribution a {
  color: var(--color-brown-800);
}

.attribution a:hover,
.attribution a:visited,
.attribution a:focus {
  font-weight: bold;
}

/* Media Queries */
@media (min-width: 700px) {
  body {
    background-color: var(--color-stone-100);
    display: flex;
    justify-content: center;
    width: 100%;
  }

  main {
    background-color: var(--color-white);
    width: 79%;
    max-width: 736px;
    border-radius: 1.5rem;
    padding: var(--spacing-500);
    margin: var(--spacing-1600) 0;
  }

  .content {
    padding: 0;
  }

  img {
    display: block;
    margin: 0 auto;
    height: 300px;
    border-radius: var(--spacing-150);
    margin-bottom: var(--spacing-400);
  }
}