body {
  color: black;
  margin: 0;
  line-height: 1.6;
  font-family: 'EB Garamond', serif;
}

header {
  text-align: center;
  background-color: #f0f0f0;
  color: rgb(0, 0, 0);
  padding: 2rem 1rem;
}

header h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight:100;
  font-size: 5rem;
  margin-bottom: 0.3rem;
}

h2{
   font-family: 'Cormorant Garamond', serif;
   font-weight:100;
}

.creator {
  font-size: 1rem;
  opacity: 0.9;
}

.top{
  display: flex;
  gap: 2rem;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
  flex-wrap:wrap; 
}

.Banana{ 
   display: block; 
   width: 100%; 
   height:900px; 
   object-fit: cover; 
   object-position:center;
   margin: 0 auto; 
   flex:1 1 60%;
   max-height:700px;
   overflow:clip;
}

.Banana img {
  width: 90%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.info-boxes{
   flex: 1 1 35%;
   display: flex;
   flex-direction: column;
   gap: 0rem;
}

.description{
  background-color: #ffffff;
  padding: 20px;
  border: none;
  font-size: 1rem;
}

.time{
  padding: 20px;
  border-radius: 8px;
  border:1px solid;
  border-color:rgb(0, 0, 0);
}


.recipe-layout{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.left-column {
  flex: 1;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 1rem; 
  height: fit-content;
}

.ingredients {
  padding: 11px;
  margin: 10px; 
  background-color: #ffffff;
  border-radius: 8px;
  width: 300px;
}

.equipment{
  padding: 20px;
  margin: 10px; 
  border-radius: 8px;
  width: 100%;
}

.right-column {
  flex: 2;overflow-y: auto;
  padding-right: 1rem;
  overflow-x: hidden;
  max-width: 100%;
  box-sizing:border-box;
}

.recipe-card h2 {
  padding-bottom: 0.3rem;
}

.recipe-card h3 {
  margin-top: 1rem;
}

ul, ol {
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.5rem;
}

.directions {
  width: 100%;
  max-width: 850px;
  background: white;
  margin: 2rem auto;
  padding:1.4rem;
  border-radius: 12px;
  margin-top: 0;
}

.directions .step {
  margin: 1.5rem 0;
}

.directions .step p {
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.directions .step img {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
  margin-top: 0.5rem;
}

.final-image {
  text-align: center;
  margin-top: 2rem;
}

.final-image img {
  max-width: 100%;
  border-radius: 10px;
}

footer {
  text-align: center;
  padding: 1rem;
  background:  #f0f0f0;
  color: #000000d7;
  font-size: 0.9rem;
}


@media (max-width: 768px) {
  header h1 {
    font-size: 2rem;
  }

@media (max-width: 768px) {
  .Banana img {
   height: 250px;
  }

  }
  .recipe-card {
    margin: 1rem;
    padding: 1.5rem;
  }

  .directions .step img {
    max-height: 220px;
  }
} 

@media (max-width: 768px) {
  .recipe-layout {
    flex-direction: column;
  }

  .left-column,
  .right-column {
    max-width: 100%;
  }
}

@media (max-width: 1024px) {
  header h1 {
    font-size: 3.5rem;
  }

  .top {
    flex-direction: column;
    text-align: center;
  }

  .Banana {
    max-height: 500px;
    width: 60%;
   height: 60%;
  }

  .info-boxes {
    width: 100%;
    align-items: center;
  }

  .description, .time {
    width: 90%;
  }

  .recipe-layout {
    flex-direction: column;
    align-items: center;
  }

  .left-column,
  .right-column {
    max-width: 100%;
    position: static;
  }

  .ingredients,.equipment {
    width: 90%;
    margin: auto;
  }

  .directions {
    width: 90%;
    margin: 1rem auto;
    padding: 1.5rem;
  }

  .directions .step img {
    max-height: 350px;
  }
}

@media (max-width: 600px) {
  header h1 {
    font-size: 2.5rem;
  }

  .Banana {
    height: 250px;
  }

  .description, .equipment {
    width: 100%;
    padding: 1rem;
    margin-bottom: 2rem;
  }
  
  .info-boxes{
   display:flexx;
   flex-direction:column;
   gap:0;
   align-items:center;
  }

   .time{
   width:80%;
   padding: 2rem;
   margin: 0;
   box-sizing:border-box;
  }

  .ingredients{
   margin: 0;
   width:100%;
    box-sizing:border-box;
  }

  .directions {
    padding: 1rem;
  }

  .recipe-card{
   padding:0;
   margin: 0;
  }

  .recipe-layout{
   margin:0;
  }

}