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

:root {
  --color-bg: linear-gradient(to top, #000, #002c40, #005b80, #00d4ff);
  --line-color: linear-gradient(to left top, #82ff86 20%, #144425, #104e1c);
  --flower-center: radial-gradient(circle, #000, #ff5e00);
  --leaf-color: radial-gradient(circle, #82ff86, #104e1c);
  --petal-color: radial-gradient(circle, #ff5e00, #ffbb00);
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  position: fixed;
  margin: 0;
  padding: 0;
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}


@keyframes neon-glow {
  0% {
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff);
  }

  50% {
    filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #fff);
  }

  100% {
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff);
  }
}

#text {
  position: absolute;
  left: 110px;
  bottom: 405px;
  color: transparent;
  font-family: 'Pacifico', cursive;
  text-align: left;
  font-size: 28px;
  font-weight: 500;
  -webkit-text-stroke: 1px white;
  animation: neon-glow 1.5s infinite alternate;
  white-space: nowrap;
  width: auto;
  display: inline-block;
}

h2 {
  font-size: 12px;
  color: #fff;
  margin-top: -80px;
}


@media screen and (max-width: 768px) {
  body {
    align-items: center;
  }
}

.flower_wrapper {
  position: absolute;
  left: 50%;
  bottom: 2vmin;
  animation: moving-flower-1 4s linear infinite;
}

.flower_stem {
  width: 2vmin;
  height: 65vmin;
  background-image: var(--line-color);
  border-radius: 4vmin;
  animation-delay: 0.3s;
}

.flower_center {
  position: absolute;
  top: 0vmin;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%) rotate(-10deg);
  width: 20vmin;
  height: 20vmin;
  border-radius: 50%;
  background: var(--flower-center);
  animation: open-flower-middle 2s 0.4s backwards;
}

.flower_petal {
  position: absolute;
  left: 50%;
  z-index: 3;
  bottom: 55vmin;
  transform: translateX(-50%);
  width: 7vmin;
  height: 17vmin;
  height: 20vmin;
  background: var(--petal-color);
  clip-path: ellipse(50% 50% at 50% 50%);
  transform-origin: center bottom;
  animation: open-flower 2s 1s backwards;
}

.flower_petal-1 {
  border-radius: 50% 50% 50% / 80% 80% 20% 20%;
  background-image: none;
  background: var(--petal-color);
  animation: open-flower 1.4s 1s backwards;
}

.flower_petal-2 {
  transform: translateX(-50%) rotate(-30deg);
}

.flower_petal-3 {
  transform: translateX(-50%) rotate(-60deg);
}

.flower_petal-4 {
  transform: translateX(-50%) rotate(-90deg);
}

.flower_petal-5 {
  transform: translateX(-50%) rotate(-120deg);
}

.flower_petal-6 {
  transform: translateX(-50%) rotate(-150deg);
}

.flower_petal-7 {
  transform: translateX(-50%) rotate(30deg);
}

.flower_petal-8 {
  transform: translateX(-50%) rotate(60deg);
}

.flower_petal-9 {
  transform: translateX(-50%) rotate(90deg);
}

.flower_petal-10 {
  transform: translateX(-50%) rotate(120deg);
}

.flower_petal-11 {
  transform: translateX(-50%) rotate(150deg);
}

.flower_petal-12 {
  transform: translateX(-50%) rotate(180deg);
}

.flower_leaf {
  position: absolute;
  left: 60%;
  bottom: 18vmin;
  transform: translateX(-45%) rotate(80deg);
  width: 7vmin;
  height: 17vmin;
  background: var(--leaf-color);
  clip-path: none;
  border-radius: 10vmin 2vmin 10vmin 2vmin;
  transform-origin: center bottom;
}

.flower_leaf-1 {
  left: 40%;
  bottom: 18vmin;
  transform: translateX(-45%) rotate(-80deg);
  animation: swing-leaves-left 2s ease-in-out infinite;
}

.flower_leaf-2 {
  left: 60%;
  bottom: 23vmin;
  transform: translateX(-55%) rotate(80deg);
  animation: swing-leaves-right 2.5s ease-in-out infinite;
}


@keyframes swing-leaves-left {
  0% {
    transform: translateX(-45%) rotate(-80deg);
  }

  50% {
    transform: translateX(-45%) rotate(-85deg);
  }

  100% {
    transform: translateX(-45%) rotate(-80deg);
  }
}

@keyframes swing-leaves-right {
  0% {
    transform: translateX(-55%) rotate(80deg);
  }

  50% {
    transform: translateX(-55%) rotate(85deg);
  }

  100% {
    transform: translateX(-55%) rotate(80deg);
  }
}


.flower_light {
  position: absolute;
  bottom: 70vmin;
  width: 1vmin;
  height: 1vmin;
  background-color: rgb(255, 251, 0);
  border-radius: 50%;
  filter: blur(0.2vmin);
  animation: light-ans 4s linear infinite backwards;
}

.flower_light-1 {
  left: -2vmin;
  animation-delay: 1s;
}

.flower_light-2 {
  left: 3vmin;
  animation-delay: 0.5s;
}

.flower_light-3 {
  left: -6vmin;
  animation-delay: 0.3s;
}

.flower_light-4 {
  left: 6vmin;
  animation-delay: 0.9s;
}

.flower_light-5 {
  left: -1vmin;
  animation-delay: 1.5s;
}

.flower_light-6 {
  left: -4vmin;
  animation-delay: 3s;
}

.flower_light-7 {
  left: 3vmin;
  animation-delay: 2s;
}

.flower_light-8 {
  left: -6vmin;
  animation-delay: 3.5s;
}

.light {
  position: absolute;
  bottom: 0vmin;
  width: 1vmin;
  height: 1vmin;
  background-color: rgb(255, 251, 0);
  border-radius: 50%;
  filter: blur(0.2vmin);
  animation: light-ans-background 7s linear infinite backwards;
}


.light-1 {
  left: 10vmin;
  animation-delay: 1s;
}

.light-2 {
  left: 20vmin;
  animation-delay: 0.5s;
}

.light-3 {
  left: 60vmin;
  animation-delay: 0.3s;
}

.light-4 {
  left: 80vmin;
  animation-delay: 0.9s;
}

.light-5 {
  left: 45vmin;
  animation-delay: 1.5s;
}

.light-6 {
  left: 10vmin;
  animation-delay: 3s;
}

.light-7 {
  left: 90vmax;
  animation-delay: 2s;
}

.light-8 {
  left: 60vmax;
  animation-delay: 3.5s;
}

.light-9 {
  left: 70vmax;
  animation-delay: 2s;
}

.light-10 {
  left: 95vmax;
  animation-delay: 3.5s;
}

.light-11 {
  left: 75vmax;
  animation-delay: 3s;
}

.light-12 {
  left: 85vmax;
  animation-delay: 0.5s;
}

@keyframes open-flower-leaves {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0);
  }
}

@keyframes open-flower {
  0% {
    transform: translateX(-50%) rotate(0);
  }
}

@keyframes open-flower-middle {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0);
  }
}

@keyframes light-ans {
  0% {
    opacity: 0;
    transform: translateY(0vmin);
  }

  25% {
    opacity: 1;
    transform: translateY(-5vmin) translateX(-2vmin);
  }

  50% {
    opacity: 1;
    transform: translateY(-15vmin) translateX(2vmin);
    filter: blur(0.2vmin);
  }

  75% {
    transform: translateY(-20vmin) translateX(-2vmin);
    filter: blur(0.2vmin);
  }

  100% {
    transform: translateY(-30vmin);
    opacity: 0;
    filter: blur(1vmin);
  }
}

@keyframes light-ans-background {
  0% {
    opacity: 0;
    transform: translateY(0vmin);
  }

  25% {
    opacity: 1;
    transform: translateY(-10vmin) translateX(-2vmin);
  }

  50% {
    opacity: 1;
    transform: translateY(-20vmin) translateX(2vmin);
    filter: blur(0.2vmin);
  }

  60% {
    transform: translateY(-30vmin) translateX(-2vmin);
    filter: blur(0.2vmin);
  }

  70% {
    transform: translateY(-40vmin) translateX(2vmin);
    filter: blur(0.2vmin);
  }

  80% {
    transform: translateY(-50vmin) translateX(-2vmin);
    filter: blur(0.2vmin);
  }

  100% {
    transform: translateY(-60vmin);
    opacity: 0;
    filter: blur(1vmin);
  }
}


@media (max-width: 758px) {
  .carta {
    max-width: 100%;
    max-height: none;
    position: relative;
    margin: 0 20px 450px 20px;
  }

  h1 {
    color: black;
    font-size: 15px;
    font-weight: 400;
    text-align: justify;
  }
}


.space__star {
  background-color: #FFFDE7;
  border-radius: 50%;
  position: absolute;
}

.space__star:after {
  background-color: #fafafa;
  border-radius: 50%;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
}

.space__star:nth-child(even) {
  background-color: #E1F5FE;
}

.space__star--small {
  height: 0.5em;
  width: 0.5em;
}

.space__star--medium {
  height: 1em;
  width: 1em;
}

.space__star--big {
  height: 1.5em;
  width: 1.5em;
}

.space__star--1 {
  -webkit-animation: shine 4s ease-in-out infinite alternate;
  animation: shine 4s ease-in-out infinite alternate;
  left: 44%;
  top: 58%;
}

.space__star--1::after {
  -webkit-animation: glow 3s ease-out infinite normal;
  animation: glow 3s ease-out infinite normal;
}

.space__star--2 {
  -webkit-animation: shine 4s ease-in-out infinite alternate;
  animation: shine 4s ease-in-out infinite alternate;
  left: 40%;
  top: 69%;
}

.space__star--2::after {
  -webkit-animation: glow 3s ease-out infinite normal;
  animation: glow 3s ease-out infinite normal;
}

.space__star--3 {
  -webkit-animation: shine 7s ease-in-out infinite alternate;
  animation: shine 7s ease-in-out infinite alternate;
  left: 76%;
  top: 96%;
}

.space__star--3::after {
  -webkit-animation: glow 5s ease-out infinite normal;
  animation: glow 5s ease-out infinite normal;
}

.space__star--4 {
  -webkit-animation: shine 2s ease-in-out infinite alternate;
  animation: shine 2s ease-in-out infinite alternate;
  left: 70%;
  top: 1%;
}

.space__star--4::after {
  -webkit-animation: glow 2s ease-out infinite normal;
  animation: glow 2s ease-out infinite normal;
}

.space__star--5 {
  -webkit-animation: shine 6s ease-in-out infinite alternate;
  animation: shine 6s ease-in-out infinite alternate;
  left: 4%;
  top: 19%;
}

.space__star--5::after {
  -webkit-animation: glow 3s ease-out infinite normal;
  animation: glow 3s ease-out infinite normal;
}

.space__star--6 {
  -webkit-animation: shine 5s ease-in-out infinite alternate;
  animation: shine 5s ease-in-out infinite alternate;
  left: 77%;
  top: 51%;
}

.space__star--6::after {
  -webkit-animation: glow 5s ease-out infinite normal;
  animation: glow 5s ease-out infinite normal;
}

.space__star--7 {
  -webkit-animation: shine 2s ease-in-out infinite alternate;
  animation: shine 2s ease-in-out infinite alternate;
  left: 30%;
  top: 91%;
}

.space__star--7::after {
  -webkit-animation: glow 3s ease-out infinite normal;
  animation: glow 3s ease-out infinite normal;
}

.space__star--8 {
  -webkit-animation: shine 6s ease-in-out infinite alternate;
  animation: shine 6s ease-in-out infinite alternate;
  left: 39%;
  top: 34%;
}

.space__star--8::after {
  -webkit-animation: glow 2s ease-out infinite normal;
  animation: glow 2s ease-out infinite normal;
}

.space__star--9 {
  -webkit-animation: shine 5s ease-in-out infinite alternate;
  animation: shine 5s ease-in-out infinite alternate;
  left: 6%;
  top: 81%;
}

.space__star--9::after {
  -webkit-animation: glow 2s ease-out infinite normal;
  animation: glow 2s ease-out infinite normal;
}

.space__star--10 {
  -webkit-animation: shine 3s ease-in-out infinite alternate;
  animation: shine 3s ease-in-out infinite alternate;
  left: 50%;
  top: 98%;
}

.space__star--10::after {
  -webkit-animation: glow 3s ease-out infinite normal;
  animation: glow 3s ease-out infinite normal;
}

.space__star--11 {
  -webkit-animation: shine 4s ease-in-out infinite alternate;
  animation: shine 4s ease-in-out infinite alternate;
  left: 67%;
  top: 31%;
}

.space__star--11::after {
  -webkit-animation: glow 2s ease-out infinite normal;
  animation: glow 2s ease-out infinite normal;
}

.space__star--12 {
  -webkit-animation: shine 4s ease-in-out infinite alternate;
  animation: shine 4s ease-in-out infinite alternate;
  left: 71%;
  top: 80%;
}

.space__star--12::after {
  -webkit-animation: glow 6s ease-out infinite normal;
  animation: glow 6s ease-out infinite normal;
}

.space__star--13 {
  -webkit-animation: shine 4s ease-in-out infinite alternate;
  animation: shine 4s ease-in-out infinite alternate;
  left: 15%;
  top: 19%;
}

.space__star--13::after {
  -webkit-animation: glow 3s ease-out infinite normal;
  animation: glow 3s ease-out infinite normal;
}

.space__star--14 {
  -webkit-animation: shine 1s ease-in-out infinite alternate;
  animation: shine 1s ease-in-out infinite alternate;
  left: 2%;
  top: 66%;
}

.space__star--14::after {
  -webkit-animation: glow 2s ease-out infinite normal;
  animation: glow 2s ease-out infinite normal;
}

.space__star--15 {
  -webkit-animation: shine 3s ease-in-out infinite alternate;
  animation: shine 3s ease-in-out infinite alternate;
  left: 23%;
  top: 99%;
}

.space__star--15::after {
  -webkit-animation: glow 2s ease-out infinite normal;
  animation: glow 2s ease-out infinite normal;
}

.space__star--16 {
  -webkit-animation: shine 5s ease-in-out infinite alternate;
  animation: shine 5s ease-in-out infinite alternate;
  left: 70%;
  top: 24%;
}

.space__star--16::after {
  -webkit-animation: glow 6s ease-out infinite normal;
  animation: glow 6s ease-out infinite normal;
}

.space__star--17 {
  -webkit-animation: shine 3s ease-in-out infinite alternate;
  animation: shine 3s ease-in-out infinite alternate;
  left: 22%;
  top: 83%;
}

.space__star--17::after {
  -webkit-animation: glow 4s ease-out infinite normal;
  animation: glow 4s ease-out infinite normal;
}

.space__star--18 {
  -webkit-animation: shine 3s ease-in-out infinite alternate;
  animation: shine 3s ease-in-out infinite alternate;
  left: 45%;
  top: 88%;
}

.space__star--18::after {
  -webkit-animation: glow 3s ease-out infinite normal;
  animation: glow 3s ease-out infinite normal;
}

.space__star--19 {
  -webkit-animation: shine 2s ease-in-out infinite alternate;
  animation: shine 2s ease-in-out infinite alternate;
  left: 31%;
  top: 50%;
}

.space__star--19::after {
  -webkit-animation: glow 2s ease-out infinite normal;
  animation: glow 2s ease-out infinite normal;
}

.space__star--20 {
  -webkit-animation: shine 2s ease-in-out infinite alternate;
  animation: shine 2s ease-in-out infinite alternate;
  left: 31%;
  top: 32%;
}

.space__star--20::after {
  -webkit-animation: glow 3s ease-out infinite normal;
  animation: glow 3s ease-out infinite normal;
}

.space__star--21 {
  -webkit-animation: shine 2s ease-in-out infinite alternate;
  animation: shine 2s ease-in-out infinite alternate;
  left: 62%;
  top: 13%;
}

.space__star--21::after {
  -webkit-animation: glow 3s ease-out infinite normal;
  animation: glow 3s ease-out infinite normal;
}

.space__star--22 {
  -webkit-animation: shine 4s ease-in-out infinite alternate;
  animation: shine 4s ease-in-out infinite alternate;
  left: 60%;
  top: 45%;
}

.space__star--22::after {
  -webkit-animation: glow 6s ease-out infinite normal;
  animation: glow 6s ease-out infinite normal;
}

.space__star--23 {
  -webkit-animation: shine 1s ease-in-out infinite alternate;
  animation: shine 1s ease-in-out infinite alternate;
  left: 11%;
  top: 30%;
}

.space__star--23::after {
  -webkit-animation: glow 6s ease-out infinite normal;
  animation: glow 6s ease-out infinite normal;
}

.space__star--24 {
  -webkit-animation: shine 5s ease-in-out infinite alternate;
  animation: shine 5s ease-in-out infinite alternate;
  left: 32%;
  top: 19%;
}

.space__star--24::after {
  -webkit-animation: glow 4s ease-out infinite normal;
  animation: glow 4s ease-out infinite normal;
}

.space__star--25 {
  -webkit-animation: shine 1s ease-in-out infinite alternate;
  animation: shine 1s ease-in-out infinite alternate;
  left: 39%;
  top: 100%;
}

.space__star--25::after {
  -webkit-animation: glow 5s ease-out infinite normal;
  animation: glow 5s ease-out infinite normal;
}

.space__star--26 {
  -webkit-animation: shine 7s ease-in-out infinite alternate;
  animation: shine 7s ease-in-out infinite alternate;
  left: 38%;
  top: 79%;
}

.space__star--26::after {
  -webkit-animation: glow 6s ease-out infinite normal;
  animation: glow 6s ease-out infinite normal;
}

.space__star--27 {
  -webkit-animation: shine 2s ease-in-out infinite alternate;
  animation: shine 2s ease-in-out infinite alternate;
  left: 58%;
  top: 15%;
}

.space__star--27::after {
  -webkit-animation: glow 3s ease-out infinite normal;
  animation: glow 3s ease-out infinite normal;
}

.space__star--28 {
  -webkit-animation: shine 1s ease-in-out infinite alternate;
  animation: shine 1s ease-in-out infinite alternate;
  left: 86%;
  top: 28%;
}

.space__star--28::after {
  -webkit-animation: glow 6s ease-out infinite normal;
  animation: glow 6s ease-out infinite normal;
}

.space__star--29 {
  -webkit-animation: shine 4s ease-in-out infinite alternate;
  animation: shine 4s ease-in-out infinite alternate;
  left: 97%;
  top: 14%;
}

.space__star--29::after {
  -webkit-animation: glow 2s ease-out infinite normal;
  animation: glow 2s ease-out infinite normal;
}

@-webkit-keyframes shine {
  0% {
    transform: scale(1);
  }

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

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

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

@-webkit-keyframes glow {
  0% {
    box-shadow: 0 0 1em #ffffff, 0 0 -1em #ffffff;
    opacity: 1;
    transform: scale(0);
  }

  100% {
    box-shadow: 0 0 1em #ffffff;
    opacity: 0;
    transform: scale(2.5);
  }
}

@keyframes glow {
  0% {
    box-shadow: 0 0 1em #ffffff, 0 0 -1em #ffffff;
    opacity: 1;
    transform: scale(0);
  }

  100% {
    box-shadow: 0 0 1em #ffffff;
    opacity: 0;
    transform: scale(2.5);
  }
}

@-webkit-keyframes blink {

  0%,
  95% {
    transform: scaleY(1);
  }

  98%,
  100% {
    transform: scaleY(0.1);
  }
}

@keyframes blink {

  0%,
  95% {
    transform: scaleY(1);
  }

  98%,
  100% {
    transform: scaleY(0.1);
  }
}

@-webkit-keyframes float {
  0% {
    transform: translateY(-5%);
  }

  100% {
    transform: translateY(5%);
  }
}

@keyframes float {
  0% {
    transform: translateY(-5%);
  }

  100% {
    transform: translateY(5%);
  }
}

@-webkit-keyframes lookaround {

  0%,
  15% {
    transform: rotate(-10deg);
  }

  20%,
  50%,
  80% {
    transform: rotate(0);
  }

  85%,
  100% {
    transform: rotate(10deg);
  }
}

@keyframes lookaround {

  0%,
  15% {
    transform: rotate(-10deg);
  }

  20%,
  50%,
  80% {
    transform: rotate(0);
  }

  85%,
  100% {
    transform: rotate(10deg);
  }
}

@-webkit-keyframes heartbeat {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  2% {
    opacity: 0.5;
    transform: scale(1.3);
  }

  4% {
    opacity: 1;
    transform: scale(1);
  }

  8% {
    transform: scale(1.1);
  }

  10% {
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1) translate(0, -800%);
  }
}

@keyframes heartbeat {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  2% {
    opacity: 0.5;
    transform: scale(1.3);
  }

  4% {
    opacity: 1;
    transform: scale(1);
  }

  8% {
    transform: scale(1.1);
  }

  10% {
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1) translate(0, -800%);
  }
}
@media screen and (max-width: 768px) {
  /* Flor 50% más grande (ajusta este valor según necesites) */
  .flower_wrapper {
    transform: translateX(-50%) scale(1.5); /* Solo añade esta línea */
  }

  /* El resto permanece IDÉNTICO a tu código actual */
  body {
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  #text {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    white-space: normal;
    bottom: auto;
  }

  .flower_wrapper {
    position: absolute;
    left: 50%;
    bottom: 10%;
    animation: moving-flower-1 4s linear infinite;
    width: auto;
    height: auto;
  }

  .flower_stem {
    width: 2vmin;
    height: 65vmin;
  }

  .flower_center {
    width: 20vmin;
    height: 20vmin;
  }

  .flower_petal {
    width: 7vmin;
    height: 20vmin;
  }
}