#diamondPopUp,
#platinumPopUp,
#birthdayPopUp {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: rgb(0 0 0 / 85%);
    z-index: 9999;
}

.canva-pixi {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    object-fit: contain;
}

.birthdayPopUp-outer {
    height: 959px;
    width: 900px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -47%);
}

.birthdayPopUp-outer::after {
    content: '';
    position: absolute;
    height: 959px;
    width: 900px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(../images/light.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
    z-index: 1;
}

img.color-img {
    width: 63%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -84%) scale(0);
    z-index: 3;
    transition: transform 1s ease;
}

img.color-img.scale {
    transform: translate(-50%, -84%) scale(1);
}

img.rightBalloon-img {
    height: 250px;
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(189%, -31%) rotate(9deg);
    z-index: 2;
}

img.leftBalloon-img {
    height: 250px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-192%, -36%) rotate(-9deg);
    z-index: 2;
}

img.rightBalloon-img.upDown {
    animation: moveUpDownR 8s ease-in-out 2;
}

img.leftBalloon-img.upDown {
    animation: moveUpDownL 8s ease-in-out 2;
}

@keyframes moveUpDownR {
    0%  {transform: translate(189%, -31%) rotate(9deg);}
    10% {transform: translate(205%, -64%) rotate(9deg);}
    20% {transform: translate(165%, -7%) rotate(9deg);}
    30% {transform: translate(188%, -32%) rotate(9deg);}
    40% {transform: translate(204%, -50%) rotate(9deg);}
    50% {transform: translate(174%, -22%) rotate(9deg);}
    60% {transform: translate(205%, -64%) rotate(9deg);}
    70% {transform: translate(165%, -7%) rotate(9deg);}
    80% {transform: translate(174%, -22%) rotate(9deg);}
    90% {transform: translate(218%, -72%) rotate(9deg);}
    100% {transform: translate(189%, -31%) rotate(9deg);}
}

@keyframes moveUpDownL {
    0%  {transform: translate(-192%, -36%) rotate(-9deg);}
    10% {transform: translate(-214%, -60%) rotate(-9deg);}
    20% {transform: translate(-190%, -24%) rotate(-9deg);}
    30% {transform: translate(-222%, -64%) rotate(-9deg);}
    40% {transform: translate(-177%, -15%) rotate(-9deg);}
    50% {transform: translate(-226%, -62%) rotate(-9deg);}
    60% {transform: translate(-184%, -21%) rotate(-9deg);}
    70% {transform: translate(-226%, -62%) rotate(-9deg);}
    80% {transform: translate(-177%, -15%) rotate(-9deg);}
    90% {transform: translate(-214%, -60%) rotate(-9deg);}
    100% {transform: translate(-192%, -36%) rotate(-9deg);}
}

img.confeti-img {
    height: 100%;
    width: 49%;
    object-fit: fill;
    position: absolute;
    top: -100%;
    transform: scale(1.2);
    z-index: 4;
    pointer-events: none;
}

img.confeti-img.img1 {left: 0%;}
img.confeti-img.img2 {right: 0%;}

.birthdayPopUp-inner {
    height: 372px;
    width: 274px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-46%, -50%) scale(0);
    padding-bottom: 18px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 4;
    transition: transform 0.2s ease;
}

.birthdayPopUp-inner.scale {
    transform: translate(-46%, -50%) scale(1);
}

.birthdayPopUp-inner p {
    font-size: 87px;
    font-weight: 600;
    background: linear-gradient(180deg, #fba980 17%, #f7cb6b 56%, #ffffff 74%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 2px 10px rgba(228, 56, 56, 0.69));
}