.container {
  width: 1200px;
  margin: 0 auto; 
  position: relative;
}

.food-essentials-page * {
  box-sizing: border-box;
}

.food-essentials-page {
  padding: 120px 0; 
  position: relative;
  height: 3020px; 
}

.navbar {
  position: relative;
  width: 1200px;
  height: 100px;
  margin: 0 auto;
  top: 0px; 
  right: 10px; 
  z-index: 10;
}

.joy-zhang,
.about-me,
.daily-life,
.food-essentials {
  position: absolute;
  top: 40px;
  font-size: 24px;
  font-family: "DM Sans", sans-serif; 
  letter-spacing: -0.045em;
  color: #614f4f;
  z-index: 10;
  text-decoration: none;
}

.joy-zhang { left: 77px; }
.about-me { left: 370px; }
.daily-life { left: 652px; }
.food-essentials { left: 927px; }

.navbar-underline {
  margin-top: -5px;
  border-style: solid;
  border-color: #79e92e;
  border-width: 5px 0 0 0;
  width: 209px;
  height: 0px;
  position: absolute;
  left: 908px;
  top: 195px;
}


.food-bag {
  position: absolute; 
  top: 110px;      
  left: 80px;     
  width: 1020px;    
  height: auto;       
}

.my,
.food,
.asterisk,
.essentials {
  color: #02985e;
  text-align: left;
  font-family: "Stack Sans Headline", sans-serif;
  font-size: 94px;
  font-weight: 400;
  position: absolute;
  animation: fadeInTilted 1s ease-out forwards;
  opacity: 0;
}

.my {
  left: 490.94px;
  top: 290px;
  transform: rotate(-13.83deg);
  animation-delay: 0s;
}

.food {
  left: 416.96px;
  top: 422.64px;
  transform: rotate(4.6deg);
  animation-delay: 0.2s;
}

.asterisk {
  font-size: 129px;
  left: 668.49px;
  top: 420px;
  transform: rotate(-6.4deg);
  animation-delay: 0.4s;
}

.essentials {
  left: 376.51px;
  top: 535px;
  width: 559.17px;
  transform: rotate(-10.5deg);
  animation-delay: 0.6s;
}

@keyframes fadeInTilted {
  from { opacity: 0; }
  to { opacity: 1; }
}

.foodrectangle-1, 
.foodrectangle-2, 
.foodrectangle-3,
.foodrectangle-4,
.foodrectangle-5,
.foodrectangle-6 {
  background: #6ed1ff;
  width: 15.24px;
  height: 15.24px;
  position: absolute;
  transform: rotate(-6.4deg);
}

.foodrectangle-1 { left: 695px; top: 655px; }
.foodrectangle-2 { left: 470px; top: 295px; }
.foodrectangle-3 { left: 643px; top: 430px; }
.foodrectangle-4 { left: 330px; top: 658px; }
.foodrectangle-5 { left: 510px; top: 560px; }
.foodrectangle-6 { left: 400px; top: 430px; }

.food-tomato,
.food-eggplant,
.food-egg,
.food-cucumber,
.food-banana {
  position: absolute;
  width: 300px;
  height: auto;
  z-index: 2;
  transition: transform 0.3s ease;
}

.food-tomato {
  top: 870px;
  left: 262px;
}

.food-eggplant {
  top: 960px;
  left: 672px;
}

.food-egg {
  top: 1340px;
  left: 262px;
}

.food-cucumber {
  top: 1630px;
  left: 672px;
}

.food-banana {
  top: 1800px;
  left: 262px;
}

.food-tomato:hover,
.food-eggplant:hover,
.food-egg:hover,
.food-cucumber:hover,
.food-banana:hover {
  transform: scale(1.2) translateY(-30px); 
}

.tomato-text,
.eggplant-text,
.egg-text,
.cucumber-text,
.banana-text {
  color: #614f4f;
  text-align: left;
  font-family: "DM Sans", sans-serif; 
  font-size: 24px;
  font-weight: 300;
  position: absolute;
  width: 300px;
}

.tomato-text {
  left: 262px;
  top: 1185px;
  width: 355px;
}

.eggplant-text {
  left: 672px;
  top: 1475px;
}

.egg-text {
  left: 262px;
  top: 1675px;
  width: 355px;
}

.cucumber-text {
  left: 672px;
  top: 1915px;
  width: 355px;
}

.banana-text {
  left: 262px;
  top: 2090px;
}

.food-footer-divider {
  width: 1085px;
  height: auto;
  position: absolute;
  left: 60px;
  top: 2520px;      
  z-index: 5;
}

.joy-zhang2 {
  color: rgba(110, 209, 255, 0.09);
  text-align: left;
  font-family: "AdvinePixel", sans-serif;
  font-size: 335.6px;
  font-weight: 400;
  position: absolute;
  left: -9px;
  top: 2544px;
  width: 1189px;
}

.contact-me {
  color: #02985e;
  text-align: left;
font-family: "Stack Sans Headline", sans-serif;
  font-size: 26px;
  font-weight: 600;
  position: absolute;
  left: 508.75px;
  top: 2635px;
  width: 167.5px;
}

._647-527-1668 {
  color: #02985e;
  text-align: center;
  font-family: "Stack Sans Headline", sans-serif;
  font-size: 16.5px;
  font-weight: 300;
  position: absolute;
  left: 528.72px;
  top: 2696px;
  width: 117.59px;
}

.email,
.linkedin {
  color: #02985e;
  text-align: center;
  font-family: "Stack Sans Headline", sans-serif;
  font-size: 16.5px;
  font-weight: 300;
  position: absolute;
  left: 491px;
  width: 203px;
}

.email { top: 2725px; }
.linkedin { top: 2754px; }

.email:hover {
  text-decoration: underline;
}

.footer-asterisk {
  color: #02985e;
  text-align: left;
  font-family: "Stack Sans Headline", sans-serif;
  font-size: 113px;
  font-weight: 300;
  position: absolute;
  left: 564.2px;
  top: 2563px;
  width: 45.5px;
  height: 87.4px;
  transform: rotate(-6.4deg);
  z-index: 10;
}