html {
  font-size: 10px;
}

main {
  padding: 0 3.2rem 3.8rem;
  font-size: 1.4rem;
  color: var(--bs-secondary-color);
}

header p {
  margin: 0 3.2rem 3.8rem;
  color: var(--bs-secondary-color);
  font-size: 1.56rem;
}

header h1 {
  margin: 4.2rem 3.2rem 2.8rem;
  font-size: 3.6rem;
  font-family: "Young Serif", serif;
}

div.preparation {
  background-color: #fff5faff;
  padding: 2.5rem;
  font-family: "Outfit", sans-serif;
}

.preparation h2 {
  margin-bottom: 2rem;
}

li {
  padding-left: 1.8rem;
  margin-left: 0.2rem;
}

ul li::marker, ol li::marker {
  color: #854632ff;
  font-weight: bold;
}

.ingredients ul li::marker {
  color: #7b284fff;
}

.ingredients, .nutrition, .instructions {
  margin-top: 3.2rem;
  margin-right: auto;
  padding-bottom: 3.2rem;
  margin-left: auto;
}

.nutrition.info-box {
  border-bottom: none;
}

.ingredients h2, .nutrition h2, .instructions h2 {
  font-family: "Young Serif", serif;
  font-size: 2.8rem;
}

.h2 {
  color: #854632ff;
  margin-bottom: 2.6rem;
}

.info-box {
  border-bottom: 1px solid #e4ded8ff;
}

table {
  color: #854632ff;
}

@media (min-width: 768px) {
  div#wrapper {
    max-width: 738px;
    margin-top: 12rem;
    margin-bottom: 12rem;
    border-radius: 3rem;
    padding: 4rem;
  }
}

@media (min-width: 768px) {
  div#wrapper img {
    border-radius: 3rem;
  }
}

@media (min-width: 768px) {
  main {
    font-size: 1.8rem;
  }
}

@media (min-width: 768px) {
  header p {
    font-size: 1.75rem;
  }
}

@media (min-width: 768px) {
  .preparation h2 {
    margin-bottom: 2.4rem;
  }
}