@font-face {
  font-family: "AdvinePixel";
  src: url("/joy-personal-website/fonts/AdvinePixel-Regular-BF668e4aa81bb64.woff2") format("woff2"),
       url("/joy-personal-website/fonts/AdvinePixel-Regular-BF668e4aa81bb64.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.container {
  width: 1200px;
  margin: 0 auto;    
  position: relative;
}
.homepage,
.homepage * {
  box-sizing: border-box;
}
.homepage {
  height: 2551px;
  position: relative;
  overflow: hidden;
}
.header-gradient {
  position: absolute;
  top: 120px; 
  left: 0;
  width: 1200px;
  height: auto;
  z-index: 3;
}
.navbar-underline {
  margin-top: -5px;
  border-style: solid;
  border-color: #79e92e;
  border-width: 5px 0 0 0;
  width: 128px; 
  height: 0px;
  position: absolute;
  left: 65px;   
  top: 195px;  
  z-index: 10;
}

.homepage-green-background {
  background: linear-gradient(
    180deg,
    rgba(145, 237, 83, 1) 0%,
    rgba(167, 248, 113, 1) 64.5%,
    rgba(254, 255, 254, 1) 93%
  );
  width: 1200px;
  height: 1444px;
  position: absolute;
  left: 0px;
  top: 987px;
  z-index: 0;
}

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

.homepage-header-door {
  width: 220px;
  height: auto;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  top: 580px;
}
.homepage-yellow-flower,
.homepage-red-flower {
  animation: bounceUp 1.5s ease-out forwards;
}

.homepage-red-flower {
  animation-delay: 0.3s;
}

@keyframes bounceUp {
  0% {
    transform: translateY(100px);
  }
  60% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}


.homepage-yellow-flower {
  width: 210px;
  height: auto;
  display: block;
  margin: 0 auto;
  position: absolute;
  z-index: 3;
  top: 700px;
  left: 200px;
}

.homepage-red-flower {
  width: 146px;
  height: auto;
  display: block;
  margin: 0 auto;
  position: absolute;
  z-index: 3;
  top: 655px;
  left: 900px;
}

.homepage-header-grass {
  width: 1200px;
  height: auto;
  display: block;
  margin: 40px auto;
  position: relative;
  z-index: 8;
  top: 480px;
}

.homepage-grass {
  width: 900px;
  height: auto;
  display: block;
  margin: 20px auto;
  position: relative;
  z-index: 10;
  top: 563px;
  animation: slideUpFromBottom 1.5s ease-out 0.8s both;
}

@keyframes slideUpFromBottom {
  from {
    opacity: 0;
    transform: translateY(100px);  
  }
  to {
    opacity: 1;
    transform: translateY(0); 
  }
}

.joy-zhang:hover,
.about-me:hover,
.daily-life:hover,
.food-essentials:hover {
  color: #02985e;
  transition: color 0.3s ease;
}

.joy-zhang {
  position: absolute;
  top: 40px;
  left: 77px;
  font-size: 24px;
  font-family: "DM Sans", sans-serif; 
  font-weight: 300;
  letter-spacing: -0.045em;
  color: #614f4f;
  z-index: 10;
}


.about-me {
  position: absolute;
  top: 40px;
  left: 370px;
  font-size: 24px;
  font-family: "DM Sans", sans-serif; 
  font-weight: 300;
  letter-spacing: -0.045em;
  color: #614f4f;
  z-index: 10;
}

.daily-life {
  position: absolute;
  top: 40px;
  left: 652px;
  font-size: 24px;
  font-family: "DM Sans", sans-serif;
  font-weight: 300; 
  letter-spacing: -0.045em;
  color: #614f4f;
  z-index: 10;
}

.food-essentials {
  position: absolute;
  top: 40px;
  left: 927px;
  font-size: 24px;
  font-family: "DM Sans", sans-serif; 
  font-weight: 300;
  letter-spacing: -0.045em;
  color: #614f4f;
  z-index: 10;
}

.joy-zhang2 {
  color: rgba(2, 152, 94, 0.09);
  text-align: left;
  font-family: "AdvinePixel", sans-serif;
  font-size: 335.5px;
  font-weight: 400;
  position: absolute;
  left: -9px;
  top: 2030.9px;
  width: 1189px;
  -webkit-text-stroke: 1px rgba(38, 112, 84, 0.22);
}

._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: 530.7px;
  top: 2181px;
  width: 117.6px;
}
.email {
  color: #02985e;
  text-align: center;
  font-family: "Stack Sans Headline", sans-serif;
  font-size: 16.5px;
  font-weight: 300;
  position: absolute;
  left: 493px;
  top: 2210px;
  width: 203px;
}

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

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

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

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

}
.homepage-footer-asterisk {
  color: #02985e;
  text-align: left;
  font-family: "Stack Sans Headline", sans-serif;
  font-size: 113px;
  font-weight: 300;
  position: absolute;
  left: 566.21px;
  top: 2050px;
  width: 45.5px;
  height: 87.4px;
  transform-origin: 0 0;
  transform: rotate(-6.4deg) scale(1, 1);
}
.homepage-footer-divider {
  width: 1085px;
  height: auto;
  position: absolute;
  left: 60px;
  top: 2000px;
  z-index: 5;
}
.homepage-asterisk {
  animation: pulse 2s ease-in-out infinite;
}


@keyframes pulse {
  0%, 100% {
    transform: rotate(-6.337deg) scale(1);
  }
  50% {
    transform: rotate(-6.337deg) scale(1.1);
  }
}

.joy {
  color: #614f4f;
  text-align: left;
  font-family: "AdvinePixel", sans-serif;
  font-size: 251px;
  font-weight: 400;
  position: absolute;
  left: 106px;
  top: 320px;
  -webkit-text-stroke: 0.75px rgba(38, 112, 84, 0.22);
}
.zhang {
  color: #614f4f;
  text-align: left;
  font-family: "AdvinePixel", sans-serif;
  font-size: 251px;
  font-weight: 400;
  position: absolute;
  left: 557px;
  top: 320px;
  -webkit-text-stroke: 0.75px rgba(38, 112, 84, 0.22);
}
.homepage-asterisk {
  color: #614f4f;
  text-align: left;
font-family: "Stack Sans Headline", sans-serif;
  font-size: 163.4px;
  font-weight: 400;
  position: absolute;
  left: 470px;
  top: 380px;
  transform-origin: 0 0;
  transform: rotate(-6.337deg) scale(1, 1);
}

.bluerectangle-1{
  background: #6ed1ff;
  width: 12.9px;
  height: 12.9px;
  position: absolute;
  left: 288.4px;
  top: 636.5px;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, -1);
}

.bluerectangle-2{
  background: #6ed1ff;
  width: 12.9px;
  height: 12.9px;
  position: absolute;
  left: 707px;
  top: 590.8px;
  transform-origin: 0 0;
  transform: rotate(-6.337deg) scale(1, -1);
}
.bluerectangle-3 {
  background: #6ed1ff;
  width: 12.9px;
  height: 12.9px;
  position: absolute;
  left: 510px;
  top: 521.82px;
  transform-origin: 0 0;
  transform: rotate(-6.337deg) scale(1, -1);
}

.bluerectangle-4 {
  background: #6ed1ff;
  width: 12.9px;
  height: 12.9px;
  position: absolute;
  left: 1034px;
  top: 554px;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, 1);
}

.bluerectangle-5 {
  background: #6ed1ff;
  width: 12.9px;
  height: 12.9px;
  position: absolute;
  left: 1124px;
  top: 376px;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, 1);
}

.bluerectangle-6 {
  background: #6ed1ff;
  width: 12.9px;
  height: 12.9px;
  position: absolute;
  left: 1235px;
  top: 513px;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, 1);
}

.bluerectangle-7 {
  background: #6ed1ff;
  width: 12.9px;
  height: 12.9px;
  position: absolute;
  left: 364px;
  top: 382px;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, 1);
}

.bluerectangle-8 {
  background: #6ed1ff;
  width: 12.9px;
  height: 12.9px;
  position: absolute;
  left: 251px;
  top: 319px;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, 1);
}

.about-me2, .daily-life2, .food-essentials2 {

animation: slideUpFromBottom 1.5s ease-out 0.8s both;
}

@keyframes slideUpFromBottom {
  from {
    opacity: 0;
    transform: translateY(100px); 
  }
  to {
    opacity: 1;
    transform: translateY(0); 
  }
}

.about-me2 {
  color: #ffffff;
  text-align: left;
  font-family: "DM Sans", sans-serif; 
  font-size: 46px;
  letter-spacing: -0.045em;
  font-weight: 500;
  position: absolute;
  left: 202px;
  top: 1445px;
  z-index: 20;
}

.daily-life2 {
  color: #ffffff;
  text-align: left;
  font-family: "DM Sans", sans-serif; 
  font-size: 46px;
  letter-spacing: -0.045em;
  font-weight: 500;
  position: absolute;
  left: 835px;
  top: 1530px;
  z-index: 20;
}

.food-essentials2 {
  color: #ffffff;
  text-align: left;
  font-family: "DM Sans", sans-serif; 
  font-size: 46px;
  letter-spacing: -0.045em;
  font-weight: 500;
  position: absolute;
  left: 395px;
  top: 1858px;
  z-index: 20;
}

.about-me2:hover, .daily-life2:hover, .food-essentials2:hover {
  color: #614f4f;
}