@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
        "wdth"100;
}


.roboto-400 {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth"100;
}

.roboto-500 {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
        "wdth"100;
}

.roboto-700 {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:
        "wdth"100;
}

.bg-blue {
    background-color: #001ea0;
}

.bg-light-blue {
    background-color: #3d89da;
}

.bg-white {
    background-color: white;
}

.color-blue {
    color: #001ea0;
}

.color-white {
    color: white;
}

/* --------------------------- */
body{
    background: linear-gradient(180deg, #93b1ce 0%, #1A4F8C 100%);
}
main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 100dvh;
    background: transparent;
    overflow: hidden;
}

.head {
    width: 100%;
    height: 5em;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.head img {
    height: 4.5em;
}

.card-section {
    height: 50%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

.birth-card {
    width: 95%;
    position: relative;

    transition-property: all;
    transition-duration: 150ms;
    animation: card-animation 2s ease-in-out infinite alternate;
}
@keyframes card-animation {
    0%{
        transform: rotateY(0deg);
        rotate: 0deg;
    }
    100%{
        transform: rotateY(-20deg);
        rotate: -10deg;
    }
}

.happy-b {
    font-size: 1.7em;
    width: 5em;
    text-align: center;
    position: absolute;
    top: 40%;
    right: 4%;
}
.price {
    font-size: 1.7em;
    width: 5em;
    text-align: center;
    position: absolute;
    bottom: 15%;
    left: 10%;
}

.birth-up{
    width: 100%;
    height: 100%;
    position: absolute;
    top:-100%;
    left: 0;
    margin: 0 auto;

    transition-property: all;
    transition-duration: 150ms;
    animation: birth-up-animation 2s ease-out;
}

@keyframes birth-up-animation {
    0%{
        top:-100%;
        left: 0;
        width: 100%;
        opacity: 1;
    }
    70%{
        opacity: 0.8;
    }
    90%{
        opacity: 0.4;
    }
    100%{
        opacity: 0;
        top:0;
        left: 0;
        width: 200%;
    }
}
.birth-down{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom:-100%;
    left: 0;
    margin: 0 auto;
    rotate: 180deg;

    transition-property: all;
    transition-duration: 150ms;
    animation-delay: 300ms;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-name: birth-down-animation;
}

@keyframes birth-down-animation {
    0%{
        bottom:-100%;
        left: 0;
        width: 100%;
        opacity: 1;
    }
    70%{
        opacity: 0.8;
    }
    90%{
        opacity: 0.4;
    }
    100%{
        opacity: 0;
        bottom:0;
        left: 0;
        width: 160%;
    }
}

@media screen and (min-width:572px) {

    .card-section {
        height: 20em;
    }

    .birth-card {
        width: 25em;
    }
}