@import url("https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap");
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* ============ -- VARIABLE -- =========== */
:root {
  --bg-clr: #593861;
  --bg-clr-alt: #3b2640;
  --txt-clr: #fef7ff;
  --orange-clr: #ffb58c;
}
/* ------------------------------------ */

/* ============ -- BASE -- =========== */
.container {
  margin: 2rem;
}
.card {
  background: linear-gradient(108.72deg, #fef7ff1f 0%, #fbf9fb05 100%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 20px;
  border: thin solid #fef7ff36;
}

/* ----------------------------------- */

body {
  font-family: "Faster One", sans-serif;
  background-color: var(--bg-clr-alt);
  color: var(--txt-clr);
  height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  animation-name: bgchange;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-delay: 4200ms;
  animation-timing-function: ease-in;
}
@keyframes bgchange {
  from {
    background-color: var(--bg-clr-alt);
  }
  to {
    background-color: var(--bg-clr);
  }
}

.bxs-sun {
  color: var(--orange-clr);
  font-size: 17rem;
  position: absolute;
  top: 35rem;
  right: -1rem;
  transform: rotate(360deg);
  animation-name: sungoup;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-delay: 4120ms;
  animation-timing-function: ease-in;
}
@keyframes sungoup {
  from {
    right: -1rem;
    top: 35rem;
  }
  to {
    right: 10rem;
    top: 0;
  }
}

.bxs-rocket {
  z-index: -1;
  color: var(--orange-clr);
  font-size: 3rem;
  position: absolute;
  bottom: 0;
  transform: translate(-50%, -50%) rotate(-45deg);
  animation-name: goup;
  animation-fill-mode: forwards;
  animation-duration: 3s;
  animation-timing-function: ease-in;
}
.rocket-one {
  left: 30%;
  animation-delay: 6000ms;
}
.rocket-two {
  left: 50%;
  animation-delay: 7000ms;
}
.rocket-three {
  left: 70%;
  animation-delay: 8000ms;
}
@keyframes goup {
  from {
    bottom: 0;
  }
  to {
    bottom: 100%;
  }
}

.dates-container {
  display: flex;
  margin-top: 5rem;
  position: relative;
  font-family: "Reenie Beanie", cursive;
}
.celeb {
  z-index: -1;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 20%;
  right: -38%;
  transform: translate(-50%, -50%) scale(0);
  animation-name: turi;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-delay: 4120ms;
}
@keyframes turi {
  from {
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    transform: translate(-50%, -50%) scale(1);
  }
}
.f-day {
  z-index: -1;
  width: 300px;
  height: 300px;
  position: absolute;
}
.day-one {
  top: 20%;
  left: 7rem;
  transform: translate(-50%, -50%);
}
.day-two {
  top: 20%;
  left: 18rem;
  transform: translate(-50%, -50%);
}
.tuturi {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 10%;
  left: 0;
}
.tuturi-2 {
  left: auto;
  right: 0;
}
.smile {
  font-size: 2.5rem;
  letter-spacing: 2rem;
  transform: scale(0);
  transform-origin: top;
  animation-name: smiled;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-delay: 14000ms;
}
@keyframes smiled {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.date-no {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 140px;
  height: 110px;

  padding-left: 1rem;
  margin-right: 2.5rem;
  font-size: 4rem;
  letter-spacing: 1rem;
}
.ro {
  animation-name: flipc;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-delay: 16000ms;
  transform: rotateY(0);
}
@keyframes flipc {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}
.year {
  width: 230px;
}
.date-no:last-child {
  margin-right: 0;
}

/* ---------------- */
.day-description {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  width: 700px;
  height: 300px;
}
.bday-desc-letters-container {
  display: flex;
  font-family: "Reenie Beanie", cursive;
  margin-bottom: 2rem;
  margin-top: 0.5rem;
}
.bday-name-letter {
  font-size: 2rem;
  margin-right: 1.5rem;
}
.divid {
  width: 1px;
  height: 1px;
  margin: 0 1rem;
}
.bday-name-letter:last-child {
  margin-right: 0;
}
.bday-desc-letter {
  font-size: 3rem;
  margin-right: 1.8rem;
}
.bday-desc-letter:last-child {
  margin-right: 0;
}

.lottie-firework {
  width: 500px;
  height: 500px;
  position: absolute;
  bottom: 0;
  transform: scale(0);
  transition: transform 1s;
  animation-name: lottie-firework-up;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-delay: 10000ms;
  animation-timing-function: ease-in;
}

@keyframes lottie-firework-up {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* ---------- */
.mountain-wave {
  z-index: -1;
  position: absolute;
  bottom: -3rem;
}