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

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #F3E5D8;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
@font-face {
  font-family: 'MyCustomFont';
  src: url('assets/fonts/young-serif/YoungSerif-Regular.ttf') format('truetype');
  font-weight: lighter;
  font-style: normal;

}

.content{
    background-color: #ffffff;
    width:700px;
    padding: 50px;
    border-radius: 12px;
    margin:100px 100px;
}

h2,h3{
  color:#805643;
  font-family: 'MyCustomFont', serif;
  margin-bottom: 10px;
}

h1{
  font-family: 'MyCustomFont', serif; 
}
.image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px; /* optional for visual polish */
}

.Prep{
  background-color: #f9e9f3;
  border-radius: 12px;
  padding: 20px;
}

div{
  margin-top:20px;
}
.container{
  margin:100px 100px;
}
.image{
  margin-top:0px;
}

ul, ol {
  margin-left: 0;
  padding-left: 1.2em; /* Adjust as needed for alignment */
}
p {
  margin: 0;
}

b{
  color:#7d7671;
}

ul li::marker,
ol li::marker {
  color: #805643;
  font-family: 'MyCustomFont', serif;
}

.nutrition-grid {
  display: flex;
  flex-direction: column;
  gap: 0; /* Keep rows tight */
  margin-top: 16px;
}

.nutrition-grid .row {
  display: grid;
  grid-template-columns: 350px auto;
  border-bottom: 1px solid #ddd;
  align-items: center;   /* vertically centers the content */
  padding: 10px 0; 
  margin-top:0px;  
  font-weight: bold;    
}

.nutrition-grid .row:last-child {
  border-bottom: none; /* Remove line after the last row */
}

.nutrition-grid .label {
  color: #7d7671; /* Same as <b> text */
  font-weight: 500;
  margin-left:10px;
  font-weight: bold;
}

.nutrition-grid .value {
  color: #805643; /* Same as h2/h3 */
  text-align: left;
}