/* General Styles */
body {
  font-family: 'Outfit', sans-serif;
  background-color: hsl(30, 54%, 90%);
  color: hsl(30, 10%, 34%);
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  line-height: 1.6; /* Improves readability */
}

.container {
  max-width: 600px;
  width: 90%; /* Makes it responsive */
  background-color: hsl(0, 0%, 100%);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 20px;
}

/* Image */
.recipe-image {
  width: 100%;
  border-radius: 12px;
  object-fit: cover; /* Ensures good image display */
}

/* Headings */
h1 {
  font-family: 'Young Serif', serif;
  color: hsl(24, 5%, 18%);
  font-size: 1.8rem;
}

h2 {
  color: hsl(14, 45%, 36%);
  font-size: 1.4rem;
}

/* Sections */
.section {
  margin-bottom: 20px;
}

.highlight {
  background-color: hsl(330, 100%, 98%);
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}

/* Lists */
ul, ol {
  padding-left: 20px;
}

/* Nutrition Section */
.nutrition {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 10px;
}

.nutrition div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid hsl(30, 18%, 87%);
  padding: 10px;
}

/* Mobile First - Default is optimized for small screens */

/* 📌 Responsive for Tablets & Desktops */
@media (min-width: 768px) {
  .container {
    max-width: 700px;
    padding: 30px;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.6rem;
  }
}

/* 📌 Large Desktop Screens */
@media (min-width: 1200px) {
  .container {
    max-width: 800px;
  }
}