@font-face {
  font-family:h1 ;
  src: url(./LibraSerifModern-Bold.otf);
}

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

html,
body {
  height: 100%;
  width: 100%;
  font-family: h1;
}
main {
  height: 100%;
  width: 100%;
  display: flex;

  align-items: center;
  justify-content: center;
}
#h1 {
  color: rgba(91, 2, 2, 0.822);
}
section {
  width: 100%;
  height: 100%;

  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}
section .img {
  width: 100%;
  
  height: 46vw;
  object-fit: cover;
  object-position: center;
}
.box-2 {
  display: flex;
  flex-direction: column;
  margin-top: 5%;
  gap: 0.5rem;
  padding: 1rem;
  width: 88%;
  
}
.box-3 {
  display: flex;
  flex-direction: column;

  gap: 0.5rem;
  padding: 3rem;
  width: 88%;
 

  border-radius: 1rem;
  background-color: rgba(255, 182, 193, 0.222);
}
.box-3 > ul {
  gap: 1rem;
  display: flex;
  flex-direction: column;
  
  margin-left: 1rem;
}
.box-4 {
  display: flex;
  flex-direction: column;
  margin-top: 5%;
  gap: 1rem;
  padding: 1rem;
  width: 88%;
  
}
.box-5 {
  display: flex;
  flex-direction: column;
  margin-top: 5%;
  gap: 1rem;
  padding: 1rem;
  width: 88%;
 
}
.box-6 {
  display: flex;
  flex-direction: column;
  margin-top: 5%;
  gap: 1rem;
  padding: 1rem;
  width: 88%;
  
}
.box-4 > ul,
ol {
  display: flex;
  gap: 1rem;
  flex-direction: column;
 
  margin-left: 1rem;
}

.box-3 ul > li > p {
  color: rgba(0, 0, 0, 0.611);
 
}
.box-4 ul > li > p {
  color: rgba(0, 0, 0, 0.611);
  
}
.box-5 ol > li > p {
  color: rgba(0, 0, 0, 0.611);
  
}


.nutrition h2 {
  color: #854632;
  font-family: "Georgia", serif;
  font-size: 1.5rem; 
   margin-bottom: 0.8rem;
}

.nutrition p {
  color: #555;
  line-height: 1; 
   margin-bottom: 1rem; 
}

.nutrition-table {
  border-collapse: collapse;
  width: 100%;
}

.row {
  display: flex;
  justify-content: space-around;
  padding: 0.8rem 0;
  border-bottom: 1px solid #eee;
}

.row .label {
  color: #555;
}

.row .value {
  font-weight: bold;
  color: #854632;
}

@media (min-width: 768px)   {
  html,body{
    background-color: antiquewhite;
  }
/* new@@ */
section {
    position: fixed;
    top: 1rem;
    bottom: 1rem;
   
    font-size: 0.8vw;
    
    font-weight: 200;
    width: 50vh;
    height: 96vh;
    
    border-radius: 1rem;
  }
 
  section .img {
    padding: 1rem;
    border-radius: 1.5rem;
    height: 19vh;
  }
  .box-3{
    height: 11vh;
    width: 95%;
    padding: 1rem;
  
  }
  .box-2,.box-4,.box-5,.box-6{
    height: auto;
   
    padding: 1rem;
    width: 100%;
    gap: 0.5rem;
  }
.box-2, .box-5,.box-6{
  margin-top: -1.8rem;
}
.box-3{
  margin-top: -0.6rem;
}
.box-4{
  margin-top: -0.6rem;
}
  

  /* font-size */
  .box-3 ul > li > p {
  color: rgba(0, 0, 0, 0.611);
  font-size: 1vh;
}
.box-4 ul > li > p {
  color: rgba(0, 0, 0, 0.611);
  font-size: 1vh;
}
.box-5 ol > li > p {
  color: rgba(0, 0, 0, 0.611);
  font-size: 1vh;
}
.box-3 >ul{
  margin-left: 1rem;
  
  gap: 0.1rem;
}
.box-4 >ul{
  
  gap: 0.1rem;
}
.box-5 >ol{
  
  gap: 0.5rem;
}
.box-2>p{
   color: rgba(0, 0, 0, 0.611);
  font-size: 1vh;

}
.box-6> p{
 
  color: rgba(0, 0, 0, 0.611);
  font-size: 1vh;
}
.nutrition-table> .row{
  gap: 0.5rem;
   color: rgba(0, 0, 0, 0.611);
  font-size: 1vh;
  

}
.box-2 >h1{
  font-size: 2.5vh;
  font-weight: 800;
}
.box-3 >h2{
  /* font-size: 2.5vh; */
  font-weight: 800;
   margin-top: -1.2rem;

}
  
}