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

  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-32: 2rem;
  --space-36: 2.25rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-128: 8rem;
}

/* fonts and text styles for texts */
.outfit {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.young-serif {
  font-family: "Young Serif", serif;
  font-weight: 400;
  line-height: 100%;
  font-style: normal;
}

.text-preset-1 {
  font-size: var(--space-36);
}

.text-preset-2 {
  font-size: var(--space-28);
}

.text-preset-3 {
  font-weight: 600;
  font-size: var(--space-20);
  line-height: 100%;
}

.text-preset-4 {
  font-weight: 400;
  font-size: var(--space-16);
  line-height: 150%;
}
/* end of fonts and text styles for texts */

body {
  background-color: var(--stone-100);
}

.recipe {
  background-color: var(--white);
}

.recipe__image img {
  width: 100%;
}

/* purpose: elements spacings */
.no-margin {
  margin: 0;
}

.flex-column {
  display: flex;
  flex-flow: column;
}

.gap-space-24 {
  gap: var(--space-24);
}

.instructions {
  margin: var(--space-32) 0;
}

.recipe__content {
  padding: var(--space-40) var(--space-32);
  gap: var(--space-32);
}

.preparation {
  padding: var(--space-24);
  gap: var(--space-16);
}

ul {
  padding-left: 1.25rem; /* shifts the bubble to the right */
  gap: var(--space-8);
}

ol {
  padding-left: 1.25rem;
  gap: var(--space-8);
}

li {
  padding-left: var(--space-16); /* shifts text to the right */
}

table {
  border-spacing: 0 var(--space-12);
  padding-left: var(--space-32);
}
/* end of purpose: elements spacings */

ol li::marker {
  /* text styles for number marker in ordered list */
  font-weight: 700;
  font-size: var(--space-16);
  line-height: 150%;
}

td:nth-child(even) {
  /* text styles for EVEN columns in the table */
  font-weight: bold;
  color: var(--brown-800);
}

td:nth-child(odd) {
  /* text styles for ODD columns in the table */
  color: var(--stone-600);
}

h1 {
  color: var(--stone-900);
}

p,
li {
  color: var(--stone-600);
}

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

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

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

/* breakpoint: Tablet */
/* 37.5rem = 600px assuming 1rem=16px */
@media (min-width: 37.5rem) {
  .text-preset-1 {
    font-size: var(--space-40);
  }
  main {
    padding: var(--space-128) var(--space-48);
  }
  .recipe {
    margin: auto;
    max-width: 38.5rem;
    border-radius: var(--space-24);
  }
  .recipe__content {
    padding: var(--space-40);
  }
  .recipe__image {
    padding: var(--space-40) var(--space-40) 0;
  }
  .recipe__image img {
    border-radius: var(--space-12);
  }
}

/* breakpoint: Desktop */
/* 64rem = 1024px assuming 1rem=16px */
@media (min-width: 64rem) {
  .recipe {
    max-width: 46rem;
  }
}