/*-------------------------Loading----------------------------*/
@keyframes spin-creating{
    0%{
        transform: translate(-50%,-50%) rotate(0turn);
    }
    50%{
        transform: translate(-50%,-50%) rotate(0.5turn);
    }
    100%{
        transform: translate(-50%,-50%) rotate(1turn);
    }
}

/*--------------------MeCard Scan Animation--------------------*/
@media(max-width: 1000000000px){
    .mecard-scan{ /*<--------div name to insert the animation*/
        position: absolute;
        transform: translate(50vw,120px) scale(1,1);
    }/* adjust size and position ^^^^^^^^^^^^^^^^^*/
    .mecard-scan img{
        position: absolute;
    }
    .phone img{
        transform: translate(-50%,-50%);
        height: 400px;
        z-index: 2;
    }
    .card img{
        height: 250px;
        z-index: 1;
        animation: a-card 20s ease-in-out infinite;
    }
    .profile-screen img{
        height: 380px;
        z-index: 3;
        opacity: 0;
        transform: translate(-50%,-50%);
        animation: a-profile-page 20s ease-in-out infinite;
        animation-delay: 8s;
    }
    .phone-popup img{
        height: 40px;
        z-index: 3;
        opacity: 0;
        transform: translate(-50%,-50%);
        animation: a-phone-popup 20s ease-in-out infinite;
        animation-delay: 4.2s;
    }

    /*          animation           */
    @keyframes a-card{
        0%{
            transform: translate(-47%,-50%) translate(220px,-80px) scale(0.8,0.8);
            opacity: 0;
        }
        10%{
            transform: translate(-47%,-50%) translate(220px,-80px)
            /*new*/
            scale(1,1);
            opacity: 1;
        }
        20%{
            transform: translate(-47%,-50%) translate(220px,-80px)
            /*new*/
            translate(-170px, -35px)
            rotate(-0.1turn);
        }
        70%{
            transform: translate(-47%,-50%) translate(220px,-80px) translate(-170px, -35px) rotate(-0.1turn)
            /*new*/
            scale(1,1);
            opacity: 1;
        }
        80%{
            transform: translate(-47%,-50%) translate(220px,-80px) translate(-170px, -35px) rotate(-0.1turn)
            /*new*/
            scale(0.8,0.8);
            opacity: 0;
        }
        100%{
            transform: translate(-47%,-50%) translate(220px,-80px);
            opacity: 0;
        }
    }

    :root{
        --a-phone-popup-one: -150px;
    }

    @keyframes a-phone-popup{
        0%{
            transform: translate(-50%,-50%) translate(0,var(--a-phone-popup-one));
            /*new*/
            opacity: 0;
        }
        5%{
            transform: translate(-50%,-50%) translate(0,var(--a-phone-popup-one))
            /*new*/
            translate(0,30px);
            opacity: 1;
        }
        9%{
            transform: translate(-50%,-50%) translate(0,var(--a-phone-popup-one)) translate(0,30px);
            /*new*/
            ;
            opacity: 1;
        }
        11%{
            transform: translate(-50%,-50%) translate(0,var(--a-phone-popup-one)) translate(0,30px)
            /*new*/
            scale(0.95,0.95);
        }
        13%{
            transform: translate(-50%,-50%) translate(0,var(--a-phone-popup-one)) translate(0,30px)
            /*new*/
            scale(1,1);
            opacity: 1;
        }
        15%{
            transform: translate(-50%,-50%) translate(0,var(--a-phone-popup-one)) translate(0,30px)
            /*new*/
            ;
            opacity: 0;
        }
        100%{
            transform: translate(-50%,-50%) translate(0,var(--a-phone-popup-one)) translate(0,30px);
            /*new*/
            opacity: 0;
        }
    }

    @keyframes a-profile-page{
        0%{
            transform: translate(-50%,-50%);
            opacity: 1;
        }
        49%{
            transform: translate(-50%,-50%)
            scale(1,1);
            opacity: 1;
        }
        50%{
            transform: translate(-50%,-50%)
            scale(0,0);
            opacity: 0;
        }
        100%{
            transform: translate(-50%,-50%)
        }
    }
}

/*---------------------Icon Table Animation--------------------*/
@media(max-width: 1000000000px){
    .icon-table{
        position: absolute;
        transform: translate(70vw,30vh) scale(1,1);
    }/* adjust size and position ^^^^^^^^^^^^^^^^^*/
    .icon-small{
        height: 20px;
    }
    .icon-table div{
        display: flex;
        position: absolute;
        align-items: center;
        color: #2e2e2e;
        box-sizing: border-box;
        opacity: 0;
        animation: anim-uses 20s ease-in-out infinite;
    }
    .icon-table div:nth-child(1){
        animation-delay: 2s;
    }
    .icon-table div:nth-child(2){
        animation-delay: 4s;
    }
    .icon-table div:nth-child(3){
        animation-delay: 6s;
    }
    .icon-table div:nth-child(4){
        animation-delay: 8s;
    }
    .icon-table div:nth-child(5){
        animation-delay: 10s;
    }
    .icon-table div:nth-child(6){
        animation-delay: 12s;
    }
    .icon-table div:nth-child(7){
        animation-delay: 14s;
    }
    .icon-table div:nth-child(8){
        animation-delay: 16s;
    }
    .icon-table div:nth-child(9){
        animation-delay: 18s;
    }
    .icon-small{
        position: relative;
        height: 35px;
        padding: 5px 8px 5px 0;
    }

    @keyframes anim-uses{
        0%{
            opacity: 0;
            transform: scale(0.5,0.5) translateY(-180px);
        }
        10%{
            opacity: 0.5;
            transform: scale(0.8,0.8) translateY(-90px);
        }
        20%{
            opacity: 1;
            transform: scale(1.2,1.2) translateY(0px);
        }
        30%{
            opacity: 0.5;
            transform: scale(0.8,0.8) translateY(90px);
        }
        40%{
            opacity: 0;
            transform: scale(0.5,0.5) translateY(180px);
        }
        100%{
            opacity: 0;
            transform: scale(0.5,0.5) translateY(180px);
        }
    }
}

/*---------------------Mobile Compatibility--------------------*/
@media (max-width: 650px){
    .mecard-scan{
        position: absolute;
        transform: translate(30vw,50vh) scale(0.8,0.8);
    }/* adjust size and position ^^^^^^^^^^^^^^^^^*/
    .icon-table{
        position: absolute;
        transform: translate(70vw,60vh) scale(0.8,0.9);
    }/* adjust size and position ^^^^^^^^^^^^^^^^^*/
}
















/**/