@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Young+Serif&display=swap");
.title {
  font-size: 4rem;
  line-height: 1;
  letter-spacing: 0;
  font-family: "Young Serif", serif;
  font-weight: 400;
}
@media only screen and (max-width: 991.98px) {
  .title {
    font-size: 3.6rem;
    line-height: 1;
    letter-spacing: 0;
    font-family: "Young Serif", serif;
  }
}

.heading {
  font-size: 2.8rem;
  line-height: 1;
  letter-spacing: 0;
  font-family: "Young Serif", serif;
  font-weight: 400;
}

.subHeading {
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
}

body, .body {
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-family: "Outfit", sans-serif;
  font-weight: 400;
}

.recipe-wrapper ol li::before, .bodyBold {
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
}

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

html {
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  background-color: #F3E5D7;
}
@media only screen and (max-width: 767.98px) {
  html {
    background-color: #FFFFFF;
  }
}

.rose-800 {
  color: #7A284E;
}

.bg-rose-800 {
  background-color: #7A284E;
}

.rose-50 {
  color: #FFF7FB;
}

.bg-rose-50 {
  background-color: #FFF7FB;
}

.stone-900 {
  color: #312E2C;
}

.bg-stone-900 {
  background-color: #312E2C;
}

.stone-600 {
  color: #5F564D;
}

.bg-stone-600 {
  background-color: #5F564D;
}

.stone-150 {
  color: #E3DDD7;
}

.bg-stone-150 {
  background-color: #E3DDD7;
}

.stone-100 {
  color: #F3E5D7;
}

.bg-stone-100 {
  background-color: #F3E5D7;
}

.brown-800 {
  color: #854632;
}

.bg-brown-800 {
  background-color: #854632;
}

.white {
  color: #FFFFFF;
}

.bg-white {
  background-color: #FFFFFF;
}

body {
  color: #5F564D;
  padding: 12.8rem 0;
}
@media only screen and (max-width: 767.98px) {
  body {
    padding: 0 0 3.2rem;
  }
}

@media only screen and (max-width: 767.98px) {
  .container {
    max-width: 100%;
    padding: unset;
    margin: unset;
  }
}
@media only screen and (max-width: 767.98px) {
  .container .row {
    padding-left: unset;
    padding-right: unset;
    margin: unset;
  }
}
@media only screen and (max-width: 767.98px) {
  .container .row > * {
    padding-left: unset;
    padding-right: unset;
    margin: unset;
  }
}

.recipe-wrapper {
  background-color: #FFFFFF;
  padding: 4rem;
  border-radius: 2.4rem;
}
@media only screen and (max-width: 767.98px) {
  .recipe-wrapper {
    padding: 0;
    border-radius: 0;
  }
}
.recipe-wrapper ul, .recipe-wrapper ol {
  margin: 0;
  padding-left: 3.2rem;
  list-style: none;
}
.recipe-wrapper ul li, .recipe-wrapper ol li {
  position: relative;
  padding-left: 0.8rem;
}
.recipe-wrapper ul li:not(:last-child), .recipe-wrapper ol li:not(:last-child) {
  margin: 0 0 0.8rem;
}
.recipe-wrapper ul li span, .recipe-wrapper ol li span {
  font-weight: 700;
}
.recipe-wrapper ol {
  counter-reset: counter;
}
.recipe-wrapper ol li {
  counter-increment: counter;
}
.recipe-wrapper ol li::before {
  content: counter(counter) ". ";
  position: absolute;
  left: -2.4rem;
  top: 0;
  color: #854632;
}
.recipe-wrapper ul li::before {
  content: "";
  display: block;
  position: absolute;
  left: -2.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 0.4rem;
  background-color: #7A284E;
}
@media only screen and (max-width: 767.98px) {
  .recipe-wrapper section {
    margin-left: 3.2rem;
    margin-right: 3.2rem;
  }
}

header {
  margin-bottom: 3.2rem;
}
header img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1.2rem;
  margin-bottom: 4rem;
}
@media only screen and (max-width: 767.98px) {
  header img {
    border-radius: 0;
  }
}
header h1 {
  margin-bottom: 2.4rem;
}
@media only screen and (max-width: 767.98px) {
  header h1, header p {
    margin-left: 3.2rem;
    margin-right: 3.2rem;
  }
}

.preperation {
  background-color: #FFF7FB;
  padding: 2.4rem;
  border-radius: 1.2rem;
  margin: 0 0 3.2rem;
}
.preperation h2 {
  margin-bottom: 1.6rem;
}

.ingredients {
  padding: 0 0 3.2rem;
  border-bottom: 1px solid #E3DDD7;
  margin: 0 0 3.2rem;
}
.ingredients h2 {
  margin: 0 0 2.4rem;
}

.instructions {
  padding: 0 0 3.2rem;
  border-bottom: 1px solid #E3DDD7;
  margin: 0 0 3.2rem;
}
.instructions h2 {
  margin: 0 0 2.4rem;
}

.nutrition h2 {
  margin: 0 0 2.4rem;
}
.nutrition p {
  margin: 0 0 2.4rem;
}
.nutrition .nutrition-table {
  width: 100%;
  border-collapse: collapse;
}
.nutrition .nutrition-table tr th {
  text-align: left;
  position: relative;
  left: 3.2rem;
  font-weight: 400;
  padding: 1.2rem 0;
}
.nutrition .nutrition-table tr:first-child th {
  padding: 0 0 1.2rem;
}
.nutrition .nutrition-table tr:last-child th {
  padding: 1.2rem 0 0;
}

tr:not(:last-child) {
  border-bottom: 1px solid hsl(30, 18%, 87%);
}

tr td {
  font-weight: 700;
  color: hsl(14, 45%, 36%);
}

/*# sourceMappingURL=styles.css.map */