@font-face {
    font-family: 'opun_mairegular';
    src: url('./fonts/opun_mai_regular-webfont.eot');
    src: url('./fonts/opun_mai_regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('./fonts/opun_mai_regular-webfont.woff2') format('woff2'),
        url('./fonts/opun_mai_regular-webfont.woff') format('woff'),
        url('./fonts/opun_mai_regular-webfont.ttf') format('truetype'),
        url('./fonts/opun_mai_regular-webfont.svg#opun_mairegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
}

.main-content {
    width: 452px;
    height: 1080px;
    position: relative;
    background-color: #C31123;
    overflow: hidden;
}

.tokens {
    position: absolute;
    top: 253px;
    left: -170px;
    animation: slide-in-bl 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 0.5s;
    z-index: 6;
}

.rectangle {
    position: absolute;
    top: 943px;
    left: 0px;
    z-index: 7;
}

.rose {
    position: absolute;
    top: 723px;
    left: 287px;
    z-index: 3;
}

.candle {
    position: absolute;
    top: 99px;
    left: 234px;
    z-index: 4;
    animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
    animation-delay: 2s;
}

.confetti {
    position: absolute;
    top: -55px;
    left: -2px;
    z-index: 3;
    animation: kenburns-top2 27s both;
    animation-delay: 2.5s;
}

.text-black {
    font-family: arial;
    font-size: 33px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    position: absolute;
    top: 908px;
    left: 12px;
    text-align: center;
    letter-spacing: -1px;
    z-index: 5;
    animation: text-focus-in 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation-delay: 2.5s;
}

/* confetti animation ----------------------------------------------*/

@keyframes kenburns-top2 {
    0% {

        transform: scale(0.3) translateY(-150px);
        opacity: 0%;
    }

    15% {

        transform: scale(0.8) translateY(-50px);
        opacity: 100%;
    }

    100% {
        transform: scale(1.2) translateY(50px);
    }
}

/*tokens-----------------------*/

@keyframes slide-in-bl {
    0% {
        -webkit-transform: translateY(1200px) translateX(-1200px);
        transform: translateY(1200px) translateX(-1200px);
        opacity: 0;
    }

    10% {
        -webkit-transform: translateY(300px) translateX(-300px);
        transform: translateY(300px) translateX(-300px);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
}

/* cardle----------------------------------------------*/

@keyframes swing-in-top-fwd {
    0% {
        -webkit-transform: rotateX(-100deg);
        transform: rotateX(-100deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 0;
    }

    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 1;
    }
}

/* text---------------------------------------------*/

@keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}