html {
  scroll-behavior: smooth;
}

body {
  background-color: #fedbd5;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 160px);
  grid-template-rows: repeat(25, 160px);
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  background-color: #fedbd5;
}

/*bg customized*/
#cornerleft {
  scale: inherit;
  position: absolute;
  left: 0px;
  top: 0px;
}

#cornerright {
  position: absolute;
  right: 0px;
  top: 0px;
}

.hero-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: clamp(
    20px,
    5vh,
    60px
  ); /* this adds spacing between Love and Every Season */
}

.love-layer {
  position: relative;
}

#love_one,
#love_two {
  font-family: "Courgette", cursive;
  font-size: clamp(100px, 15vw, 300px);
  text-align: center;
}

#love_one {
  color: #fdf8f8;
  -webkit-text-stroke: 0.08em #fdf8f8;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

#love_two {
  color: #fc9fa4;
  font-weight: bolder;
  position: relative;
  z-index: 2;
}

.everyseason-layer {
  position: relative;
}

#everyseason_one,
#everyseason_two {
  font-family: "Courgette", cursive;
  font-size: clamp(30px, 5vw, 100px);
  text-align: center;
}

#everyseason_one {
  color: #fdf8f8;
  -webkit-text-stroke: 0.05em #fdf8f8;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

#everyseason_two {
  color: #fc9fa4;
  font-weight: bolder;
  position: relative;
  z-index: 2;
}

#clouds {
  position: absolute;
  top: 800px;
  left: -114px;
}

#clouds_two {
  position: absolute;
  top: 450px;
  right: -180px;
}

#flower_one {
  grid-column-start: 6;
  grid-row-end: 1;
  opacity: 50%;
  scale: 70%;
}

#flower_two {
  grid-column-start: 3;
  grid-row-end: 2;
  transform: rotate(45deg);
  scale: 75%;
  opacity: 50%;
}

#flower_three {
  grid-column-start: 1;
  grid-row-end: 4;
  opacity: 50%;
}

#flower_four {
  grid-column-start: 6;
  grid-row-end: 5;
  transform: rotate(90deg);
  scale: 50%;
  opacity: 50%;
}

#flower_five {
  grid-column-start: 9;
  grid-row-end: 2;
  transform: rotate(30deg);
  scale: 70%;
  opacity: 50%;
}

#flower_six {
  grid-column-start: 10;
  grid-row-end: 5;
  transform: rotate(30deg);
  scale: 70%;
  opacity: 50%;
}

#flower_one:hover {
  transform: opacity(100%);
}

/*spring*/

#spring {
  font-family: "Courgette", cursive;
  color: #f77298;
  font-weight: bolder;
  font-size: 160px;
  grid-column-start: 2;
  grid-row-end: 7;
}

#springone {
  font-family: "Courgette", cursive;
  font-size: 50px;
  color: white;
  grid-column-start: 3;
  grid-column-end: 9;
  grid-row-end: 8;
  transition: transform 0.4s;
}

#springtwo {
  font-family: "Courgette", cursive;
  font-size: 50px;
  color: white;
  grid-column-start: 4;
  grid-column-end: 10;
  grid-row-end: 9;
  transition: transform 0.4s;
}

#large_flower {
  position: absolute;
  top: 1300px;
  left: -110px;
  transform: rotate(8deg);
  scale: 100%;
  animation: Lflower 4s ease-in-out infinite alternate both;
}

#flower_body {
  position: absolute;
  top: 1530px;
  left: -105px;
}

#Fflower_one {
  grid-column-start: 6;
  grid-row-end: 9;
  opacity: 50%;
  scale: 50%;
}

#Fflower_two {
  grid-column-start: 9;
  grid-row-end: 6;
  opacity: 50%;
  scale: 100%;
}

#Fflower_three {
  grid-column-start: 5;
  grid-row-end: 7;
  opacity: 50%;
  scale: 70%;
  rotate: 30deg;
}

#Fflower_four {
  grid-column-start: 3;
  grid-row-end: 10;
  opacity: 70%;
  rotate: 35deg;
}

#Fflower_five {
  grid-column-start: 8;
  grid-row-end: 8;
  opacity: 50%;
  scale: 70%;
}

#Fflower_six {
  grid-column-start: 8;
  grid-row-end: 10;
  opacity: 80%;
  scale: 70%;
}

#branch {
  position: absolute;
  top: 1216px;
  right: -139px;
}

#bird {
  position: absolute;
  top: 1098px;
  right: 383px;
}

/*summer*/

#cloud_sum {
  position: absolute;
  top: 1911px;
  left: 180px;
  scale: 120%;
}

#cloud_mer {
  position: absolute;
  top: 1911px;
  left: 930px;
  scale: 120%;
  grid-column-start: 5;
  grid-column-end: 8;
  grid-row-start: 15;
}

/*summer*/
#S {
  font-family: "Courgette", cursive;
  font-size: 200px;
  font-weight: bolder;
  color: #f26b8c;
  position: absolute;
  top: 2240px;
  left: 168px;
}

#u {
  font-family: "Courgette", cursive;
  font-size: 200px;
  font-weight: bolder;
  color: #f26b8c;
  position: absolute;
  top: 2164px;
  left: 390px;
}

#m_one {
  font-family: "Courgette", cursive;
  font-size: 200px;
  font-weight: bolder;
  color: #f26b8c;
  position: absolute;
  top: 2238px;
  left: 560px;
}

#m_two {
  font-family: "Courgette", cursive;
  font-size: 200px;
  font-weight: bolder;
  color: #f26b8c;
  position: absolute;
  top: 2167px;
  left: 920px;
}

#e {
  font-family: "Courgette", cursive;
  font-size: 200px;
  font-weight: bolder;
  color: #f26b8c;
  position: absolute;
  top: 2240px;
  left: 1170px;
}

#r {
  font-family: "Courgette", cursive;
  font-size: 200px;
  font-weight: bolder;
  color: #f26b8c;
  position: absolute;
  top: 2167px;
  left: 1340px;
}

#wire_one {
  position: absolute;
  top: 2080px;
  left: 220px;
}

#wire_two {
  position: absolute;
  top: 2080px;
  left: 420px;
}

#wire_three {
  position: absolute;
  top: 2120px;
  left: 620px;
  scale: 120%;
}

#wire_four {
  position: absolute;
  top: 2080px;
  left: 1020px;
}

#wire_five {
  position: absolute;
  top: 2120px;
  left: 1220px;
  scale: 120%;
}

#wire_six {
  position: absolute;
  top: 2060px;
  left: 1400px;
}

#sun {
  position: absolute;
  top: 2550px;
  left: -100px;
  scale: 75%;
}

#double_clouds {
  position: absolute;
  top: 2770px;
  left: -200px;
}

#grass {
  position: absolute;
  top: 2400px;
  right: -100px;
}

#summerone {
  font-family: "Courgette", cursive;
  font-size: 50px;
  color: white;
  grid-column-start: 3;
  grid-column-end: 9;
  grid-row-end: 15;
  transition: transform 0.4s;
}

#summertwo {
  font-family: "Courgette", cursive;
  font-size: 50px;
  color: white;
  grid-column-start: 4;
  grid-column-end: 9;
  grid-row-end: 16;
  transition: transform 0.4s;
}

#psum_one {
  position: absolute;
  top: 2500px;
  right: 500px;
  scale: 80%;
}

#psum_two {
  position: absolute;
  top: 2700px;
  right: 1500px;
  scale: 75%;
}

#psum_three {
  position: absolute;
  top: 2400px;
  right: 1000px;
  scale: 50%;
}

#psum_four {
  position: absolute;
  top: 2900px;
  right: 400px;
}

#lpsum_one {
  position: absolute;
  top: 2200px;
  right: 300px;
  scale: 80%;
}

#lpsum_two {
  position: absolute;
  top: 2400px;
  right: 1800px;
  scale: 75%;
}

#lpsum_three {
  position: absolute;
  top: 2670px;
  right: 1000px;
  scale: 50%;
}

#lpsum_four {
  position: absolute;
  top: 2900px;
  right: 1200px;
  scale: 60%;
}

/*autumn*/
#autumn {
  font-family: "Courgette", cursive;
  color: #d35e7f;
  font-weight: bolder;
  font-size: 150px;
  grid-column-start: 2;
  grid-row-end: 18;
}

#autumnone {
  font-family: "Courgette", cursive;
  font-size: 50px;
  color: white;
  grid-column-start: 3;
  grid-column-end: 9;
  grid-row-end: 19;
  transition: transform 0.4s;
  transition-duration: 0.4s;
}

#autumntwo {
  font-family: "Courgette", cursive;
  font-size: 50px;
  color: white;
  grid-column-start: 4;
  grid-column-end: 10;
  grid-row-end: 20;
  transition: transform 0.4s;
}

#leave_one {
  position: absolute;
  top: 3290px;
  left: 100px;
  scale: 75%;
}

#leave_two {
  position: absolute;
  top: 3100px;
  left: 700px;
  scale: 50%;
  rotate: 20deg;
}

#leave_three {
  position: absolute;
  top: 3400px;
  left: 900px;
  scale: 30%;
  rotate: 20deg;
}

#leave_four {
  position: absolute;
  top: 3400px;
  left: 1600px;
  rotate: 10deg;
}

#leave_five {
  position: absolute;
  top: 3700px;
  left: 1000px;
  scale: 75%;
}

#leave_six {
  position: absolute;
  top: 3100px;
  left: 1500px;
  scale: 80%;
}

#dancing {
  position: absolute;
  top: 3390px;
  left: -100px;
  scale: 75%;
  animation: dance 10s infinite;
}
#stepping {
  position: absolute;
  top: 3490px;
  left: -100px;
  scale: 75%;
}

/*winter*/
#winter {
  font-family: "Courgette", cursive;
  color: #a84f6d;
  font-weight: bolder;
  font-size: 150px;
  grid-column-start: 2;
  grid-row-end: 23;
}

#winterone {
  font-family: "Courgette", cursive;
  font-size: 50px;
  color: white;
  grid-column-start: 3;
  grid-column-end: 9;
  grid-row-end: 24;
  transition: transform 0.4s;
}

#wintertwo {
  font-family: "Courgette", cursive;
  font-size: 50px;
  color: white;
  grid-column-start: 4;
  grid-column-end: 10;
  grid-row-end: 25;
  transition: transform 0.4s;
}

#winterthree {
  font-family: "Courgette", cursive;
  font-size: 50px;
  color: white;
  grid-column-start: 5;
  grid-column-end: 11;
  grid-row-end: 26;
}

#tree {
  position: absolute;
  top: 4010px;
  left: -50px;
}

#body {
  position: absolute;
  top: 4550px;
  left: -100px;
}

#hearts {
  position: absolute;
  top: 4210px;
  right: 50px;
  rotate: 330deg;
}

#snow_one {
  position: absolute;
  top: 4010px;
  right: 400px;
}

#snow_two {
  position: absolute;
  top: 4210px;
  right: 600px;
  scale: 50%;
}

#snow_three {
  position: absolute;
  top: 4650px;
  right: 1340px;
}

#snow_four {
  position: absolute;
  top: 4710px;
  right: 450px;
}

#snow_five {
  position: absolute;
  top: 4210px;
  right: 1600px;
  scale: 75%;
}

#snow_six {
  position: absolute;
  top: 4510px;
  right: 100px;
}

#snow_seven {
  position: absolute;
  top: 4110px;
  right: 1200px;
  scale: 50%;
}

#snow_eight {
  position: absolute;
  top: 4410px;
  right: 1500px;
  scale: 60%;
}

/*hover*/
#springone:hover {
  transform: translateY(-10px);
  color: #f77298e0;
}

#springtwo:hover {
  transform: translateY(-10px);
  color: #f77298e0;
}

#summerone:hover {
  transform: translateY(-10px);
  color: #f26b8c;
}

#summertwo:hover {
  transform: translateY(-10px);
  color: #f26b8c;
}

#autumnone:hover {
  transform: translateY(-10px);
  color: #d35e7f;
}

#autumntwo:hover {
  transform: translateY(-10px);
  color: #d35e7f;
}

#winterone:hover {
  transform: translateY(-10px);
  color: #a84f6d;
}

#wintertwo:hover {
  transform: translateY(-10px);
  color: #a84f6d;
}

#winterthree:hover {
  transform: translateY(-10px);
  color: #a84f6d;
}
#tree:hover {
  animation: sway 3s ease-in-out infinite;
}
#sun:hover {
  animation: rotate 5s infinite alternate-reverse;
}

@keyframes opacity_rotate {
  from {
    opacity: 100%;
  }

  to {
    rotate: 360deg;
    opacity: 30%;
  }
}

.animation_opacity_rotate {
  animation-name: opacity_rotate;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes updown {
  from {
    transform: translateY(30px);
  }

  to {
    transform: translateY(0px);
  }
}

.animation_updown {
  animation-name: updown;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  animation-fill-mode: both;
}

@keyframes animate_flower_one {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 25deg;
  }
}

.animate_flower_one {
  animation-name: animate_flower_one;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-direction: alternate-reverse;
}

@keyframes animate_flower_two {
  from {
    rotate: 20deg;
  }

  to {
    rotate: 0deg;
  }
}

.animate_flower_two {
  animation-name: animate_flower_two;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

@keyframes bird {
  from {
    transform: translateX(20px);
  }

  to {
    transform: translateX(0px);
  }
}

.animate_bird {
  animation-name: bird;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes Lflower {
  from {
    rotate: 3deg;
  }

  to {
    rotate: 0deg;
  }
}

@keyframes opacity {
  from {
    opacity: 100%;
  }

  to {
    opacity: 0%;
  }
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }

  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }

  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }

  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }

  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }

  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }

  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }

  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }

  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }

  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }

  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

.shake-text {
  animation-name: shake;
  animation: shake 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate-reverse;
}

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in {
  animation: slide-in 8s ease-in-out;
}

@keyframes fall {
  0% {
    opacity: 100;
  }

  10% {
    transform: translateY(10px) translateX(-10px) rotate(0deg);
  }

  20% {
    transform: translateY(30px) translateX(15px);
  }

  30% {
    transform: translateY(50px) translateX(-10px);
  }

  40% {
    transform: translateY(70px) translateX(20px);
  }

  50% {
    transform: translateY(80px) translateX(-10px);
  }

  60% {
    transform: translateY(100px) translateX(20px);
  }

  70% {
    transform: translateY(120px) translateX(-5px);
  }

  80% {
    transform: translateY(140px) translateX(20px);
  }

  90% {
    transform: translateY(160px) translateX(-10px);
  }

  100% {
    opacity: 0%;
    transform: translateY(180px) translateX(15px);
  }
}
.fall {
  animation: fall 7s ease-in-out 2s infinite;
  opacity: 70%;
}

.snow {
  animation: snow 10s linear 4s infinite alternate-reverse;
}

@keyframes snow {
  0% {
    transform: translateX(0px) rotate(0deg) translateY(0);
  }

  100% {
    transform: translateX(20px) rotate(720deg) translateY(10px);
  }
}

/*transition-property: transform ;
    transition-duration: 0.4s;
    transition-timing-function: linear ;
    transition-delay: 0s;*/

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.heart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.heart {
  width: 100px;
  /* Adjust the image size as needed */
  height: 100px;
  /* Adjust the image size as needed */
  animation: pulse 2s ease-in-out infinite;
}

@keyframes sway {
  0% {
    transform: rotateZ(-5deg);
  }

  50% {
    transform: rotateZ(5deg);
  }

  100% {
    transform: rotateZ(-5deg);
  }
}

.sway-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes dance {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-400px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Restore the fixed artboard inside different preview widths. */
body{margin:0;position:relative;width:2160px;overflow-x:clip}.hero-container{width:2160px;height:1100px}html{overflow-x:clip}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}