*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
@font-face {
  font-family: 'Young Serif';
  src: url('./assets/fonts/young-serif/YoungSerif-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Outfit';
  src: url('./assets/fonts/outfit/static/Outfit-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Outfit';
  src: url('./assets/fonts/outfit/static/Outfit-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Outfit';
  src: url('./assets/fonts/outfit/static/Outfit-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
body {
  font-family: 'Outfit', sans-serif;
  background-color: #F3E5D8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
}
.container {
  background-color: #FFFFFF;
  border-radius: 20px;
  width: 100%;
  max-width: 548px;
  padding: 24px;
  gap: 16px;
  display: flex;
  flex-direction: column;
}
.image img{
  width: 504px;
  height: 231px;
  border-radius: 12px;
}
.title {
  font-family: 'Young Serif', sans-serif;
  font-size: 28px;
  font-weight: 400;
}
.description {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #5F574E;
}
.preparation {
  font-family: 'Outfit', sans-serif;
  background-color: #FFF0F9;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  padding: 20px 28px;
}
.preparation h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #7B284F;
  /* 标题与列表项距离 */
  margin-bottom: 10px;
}
.preparation ul {
  padding-left: 24px;
}
.preparation li {
  color: #5F574E;
  /* 列表项与列表项距离 */
  margin-bottom: 8px;
}
/* 圆点颜色 */
.preparation-time li::marker {
  color: #7B284F;
}
.ingredients {
  font-family: 'Outfit', sans-serif;
  display: flex;
  flex-direction: column;
}
.ingredients h1 {
  font-family: 'Young Serif', sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #854632;
  /* 标题与列表项距离 */
  margin-bottom: 10px;
}
.ingredients ul {
  padding-left: 24px;
  /* 取消默认的圆点 */
  list-style-type: none;
    /* 取消默认的内边距 */
  padding-left: 0;
}
.ingredients li::before {
  content: '• '; 
  color: #5F574E;
  font-size: 1em;
}
.ingredients li {
  color: #5F574E;
  /* 列表项与列表项距离 */
  margin-bottom: 8px;
  /* 圆点和文字的距离 */
  padding-left: 16px; 
  font-size: 12px;
}
hr {
  border: none; /* 移除默认的立体边框 */
  border-top: 1px solid #E7E7E7; /* 用顶部边框来创建新的线条 */
  margin: 12px 0; /* 控制线条与其他部分的垂直间距 */
}
.instructions {
  font-family: 'Outfit', sans-serif;
  display: flex;
  flex-direction: column;
}
.instructions h1 {
  font-family: 'Young Serif', sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #854632;
  /* 标题与列表项距离 */
  margin-bottom: 10px;
}
.instructions ol {
  padding-left: 16px;
}
.instructions li {
  color: #5F574E;
  /* 列表项与列表项距离 */
  margin-bottom: 8px;
  /* 圆点和文字的距离 */
  padding-left: 0px; 
  font-size: 12px;
  /* 设置最大宽度 */
  max-width: 471px;
}
.nutrition {
  font-family: 'Outfit', sans-serif;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #5F574E;
}
.nutrition h1 {
  font-family: 'Young Serif', sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #854632;
  /* 标题与列表项距离 */
  margin-bottom: 10px;
}
.nutrition ul {
  padding-left: 24px;
}
.nutrition li {
  color: #5F574E;
  /* 列表项与列表项距离 */
  margin-bottom: 8px;
}
.nutrition table {
  width: 100%;
  border-collapse: collapse; 
}
.nutrition tr {
  /* 在每行下方添加一条分隔线 */
  border-bottom: 1px solid #E7E7E7; 
}
/* 最后一行不需要底部分隔线 */
.nutrition tr:last-child {
  border-bottom: none;
}
.nutrition th,
.nutrition td {
  padding: 12px 16px;
  text-align: left;
}

.nutrition td {
  color: #854632; 
  font-weight: 700;
  padding-left: 24px;
}