.h-screen {
    height: 100vh !important;
    max-height: calc(var(--vh, 1vh) * 100) !important;
}

.angel-margin {
    margin-top: calc(var(--vh, 1vh) * -100) !important;
}

.hero-section-bg {
    background-image: url("/assets/images/background.png");
    background-position: center;
    background-size: cover;

}


.bday-wishes-bg {
    background-image: url("/assets/images/wishes-animation.gif"), url("/assets/images/happy-birthday.png"), url("/assets/images/wishes.png");
    background-position: center;
    background-size: cover;
}

.cake-section-bg {
    background-image: url("/assets/images/cake-bg.png");
    background-size: cover;
    background-position: center;
}

/* CSS for mobile devices */
.desktop-device .cake-section-bg {
    background-attachment: fixed;
}

/* parallalx start  */

.sticky-bottom {
    position: sticky;
    bottom: 0;
}

.scroll-section {
    scroll-snap-align: start;
}

.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* parallalx end */

/* scroll down animation start */

.chevron {
    position: absolute;
    width: 28px;
    height: 8px;
    opacity: 0;
    transform: scale3d(0.5, 0.5, 0.5);
    animation: move 3s ease-out infinite;
}

.chevron:first-child {
    animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
    animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
    content: ' ';
    position: absolute;
    top: 0;
    height: 100%;
    width: 51%;
    background: #fff;
}

.chevron:before {
    left: 0;
    transform: skew(0deg, 30deg);
}

.chevron:after {
    right: 0;
    width: 50%;
    transform: skew(0deg, -30deg);
}

@keyframes move {
    25% {
        opacity: 1;

    }

    33% {
        opacity: 1;
        transform: translateY(30px);
    }

    67% {
        opacity: 1;
        transform: translateY(40px);
    }

    100% {
        opacity: 0;
        transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
    }
}


@keyframes pulse {
    to {
        opacity: 1;
    }
}


/* scroll down animation end */


/* shooting stars start */

.star {
    position: relative;
    top: 50%;
    left: 50%;
    height: 2px;
    background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
    filter: drop-shadow(0 0 6px #699bff);
    animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}

.star::before,
.star::after {
    position: absolute;
    content: '';
    top: calc(50% - 1px);
    right: 0;
    height: 2px;
    background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #c3d6ff, rgba(143, 143, 244, 0));
    border-radius: 100%;
    transform: translateX(50%) rotateZ(45deg);
    animation: shining 3000ms ease-in-out infinite;
}

.star::after {
    transform: translateX(50%) rotateZ(-45deg);
}

.star:nth-child(1) {
    top: calc(50% - 200px);
    left: calc(50% - 300px);
    animation-delay: 650ms;
}

.star:nth-child(1)::before,
.star:nth-child(1)::after {
    animation-delay: 650ms;
}

.star:nth-child(2) {
    top: calc(50% - -50px);
    left: calc(50% - 190px);
    animation-delay: 150ms;
}

.star:nth-child(2)::before,
.star:nth-child(2)::after {
    animation-delay: 150ms;
}

.star:nth-child(3) {
    top: calc(50% - -90px);
    left: calc(50% - 200px);
    animation-delay: 1600ms;
}

.star:nth-child(3)::before,
.star:nth-child(3)::after {
    animation-delay: 1600ms;
}

.star:nth-child(4) {
    top: calc(50% - 50px);
    left: calc(50% - 250px);
    animation-delay: 4700ms;
}

.star:nth-child(4)::before,
.star:nth-child(4)::after {
    animation-delay: 4700ms;
}

.star:nth-child(5) {
    top: calc(50% - -190px);
    left: calc(50% - 200px);
    animation-delay: 2100ms;
}

.star:nth-child(5)::before,
.star:nth-child(5)::after {
    animation-delay: 2100ms;
}

/* Animations */
@keyframes tail {
    0% {
        width: 0;
    }

    30% {
        width: 100px;
    }

    100% {
        width: 0;
    }
}

@keyframes shining {
    0% {
        width: 0;
    }

    50% {
        width: 30px;
    }

    100% {
        width: 0;
    }
}

@keyframes shooting {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(320px);
    }
}

/* shooting stars end */


/* candel animation start */


*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Global Colors */
:root {
    --background: #2d3d50;
    --flame: #ffad00;
    --flame-shadow: #ffad00;
    --wax: #ffffff;
    --wax-shadow: #d8deed;
    --wick: #ad87a9;
    --stand: #1c233e;
    --scale: 1;
    /* Control the scale of the entire candle */

}

.candle-flame {
    width: calc(15px * var(--scale));
    height: calc(30px * var(--scale));
    background: var(--flame);
    border-radius: calc(8px * var(--scale)) calc(8px * var(--scale)) calc(8px * var(--scale)) calc(8px * var(--scale)) / calc(20px * var(--scale)) calc(20px * var(--scale)) calc(8px * var(--scale)) calc(8px * var(--scale));
    box-shadow: 0px 0px calc(20px * var(--scale)) 0px var(--flame-shadow);
    animation: flame-twirl 15s ease infinite, glow 2s ease infinite;
}

.candle-wick {
    height: calc(10px * var(--scale));
    width: calc(3px * var(--scale));
    background: var(--wick);
}

.candle-wax {
    width: calc(20px * var(--scale));
    height: calc(70px * var(--scale));
    background: var(--wax);
    border-radius: calc(6px * var(--scale));
    box-shadow: inset calc(-15px * var(--scale)) 0px 0px calc(-10px * var(--scale)) var(--wax-shadow);
}

.candle-stand {
    width: calc(100px * var(--scale));
    height: calc(8px * var(--scale));
    background: var(--stand);
    border-radius: calc(3px * var(--scale));
}

/* Animations */

@keyframes flame-twirl {

    0%,
    22%,
    49%,
    62%,
    81%,
    100% {
        border-radius: calc(2px * var(--scale)) calc(14px * var(--scale)) calc(8px * var(--scale)) calc(8px * var(--scale)) / calc(20px * var(--scale)) calc(20px * var(--scale)) calc(8px * var(--scale)) calc(8px * var(--scale));
    }

    14%,
    32%,
    56%,
    70%,
    89% {
        border-radius: calc(14px * var(--scale)) calc(2px * var(--scale)) calc(8px * var(--scale)) calc(8px * var(--scale)) / calc(20px * var(--scale)) calc(20px * var(--scale)) calc(8px * var(--scale)) calc(8px * var(--scale));
    }
}

@keyframes glow {

    0%,
    30%,
    60%,
    80%,
    100% {
        box-shadow: 0 0 calc(20px * var(--scale)) 0 var(--flame);
    }

    20%,
    50%,
    70% {
        box-shadow: 0 0 calc(22px * var(--scale)) 0 var(--flame);
    }
}

/* candel animation end */

.playwrite-mx {
    font-family: "Playwrite MX", cursive;
    font-stretch: semi-expanded;
}

.satisfy-regular {
    font-family: "Satisfy", cursive;
}