/* ---- Font Family: Faster One from google */
@import url('https://fonts.googleapis.com/css2?family=Faster+One&display=swap');
@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: .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;
}