.card {
        position: absolute;
        width: 280px;
        height: 160px;
        border-radius: 20px;
        padding: 5px;
        
} 
.card1 {
    top: 0;
    left: 50%;
    z-index: 1;
    background-color: #abc4ff;
    animation: upward 2s ease-in-out infinite alternate;
}
.inner-card1 {
    width: 100%;
    background-color: var(--card);
    height: 90%;
    border-radius: 18px;
    padding: 4px 8px;
    line-height: 1.5;
}

.inner-card1 p{
    background-color: transparent;
}
.inner-card1 p:nth-child(1){
    display: inline;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 5px;
    background-color: #04395e;
    color: aliceblue;
}
.inner-card1 p:nth-child(2){
    font-weight: bold;
}

.inner-card1 p:nth-child(3){
    font-size: 12px;
}
.inner-card1 p:nth-child(4){
    display: inline;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 5px;
    background-color: #f94144;
    color: aliceblue;
}

.inner-card1 p:nth-child(5){
    display: inline;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 5px;
    background-color: #606c38;
    color: aliceblue;
}



.card2 {
    top: 0;
    right: 50%;
    z-index: 1;
    background-color: #f08700;
    animation: upwardcard2 2s ease-in-out infinite alternate;
}

.inner-card2 {
    width: 100%;
    background-color: var(--card);
    height: 90%;
    border-radius: 18px;
    padding: 4px 8px;
    line-height: 1.5;
}

.inner-card2 p{
    background-color: transparent;
}
.inner-card2 p:nth-child(1){
    display: inline;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 5px;
    background-color: #04395e;
    color: aliceblue;
}
.inner-card2 p:nth-child(2){
    font-weight: bold;
}

.inner-card2 p:nth-child(3){
    font-size: 12px;
}
.inner-card2 p:nth-child(4){
    display: inline;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 5px;
    background-color: #f94144;
    color: aliceblue;
}

.inner-card2 p:nth-child(5){
    display: inline;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 5px;
    background-color: #606c38;
    color: aliceblue;
}

.inner-card2 span {
    text-align: end;
}

.card1:hover {
    animation-play-state: paused;
} 
.card2:hover {
    animation-play-state: paused;
} 

@keyframes upward {
    from {
        transform: rotate(-10deg) translateX(-190%) translateY(0px);
    }
    to {
        transform: rotate(-10deg) translateX(-190%) translateY(-40px);
    }
}
@keyframes upwardcard2 {
    from {
        transform: rotate(10deg) translateX(190%) translateY(0px);
    }
    to {
        transform: rotate(10deg) translateX(190%) translateY(-40px);
    }
}
@media (max-width: 550px) {
    .card1 {
        position: absolute;
        opacity: 0;
        top: 0;
        left: 20px;
        z-index: 1;
        background-color: #b8bedd;
        animation: toleft 1s ease-in-out 1 forwards,upwardmobile 2s 1.5s ease-in-out infinite alternate;
    }       
    .card2 {
        position: absolute;
        top: auto;
        bottom: 100px;
        right: 20px;
        z-index: 1;
        background-color: #e07a5f;
        animation: toright 1s ease-in-out 1 forwards, upwardcard2mobile 2s 1.5s ease-in-out infinite alternate;
    }

    @keyframes toleft {
        from {
            transform: rotate(-10deg) translateX(-100px);
            opacity: 0.5;
        }to{
            transform: rotate(-10deg) translateX(0px);
            opacity: 1;
        }
    }
    @keyframes toright {
        from {
            transform: rotate(10deg) translateX(100px);
            opacity: 0.5;
        }to{
            transform: rotate(10deg) translateX(0px);
            opacity: 1;
        }
    }
    @keyframes upwardmobile {
        from { transform: rotate(-10deg)  translateY(0); }
        to   { transform: rotate(-10deg)  translateY(-20px); }
    }

    @keyframes upwardcard2mobile {
        from { transform: rotate(10deg) translateY(0); }
        to   { transform: rotate(10deg) translateY(-20px); }
    }
}