/* ==============================
     Animation for bigger screen
=============================== */

@keyframes down{
    0%{
        transform: translateY(-100px);
    }

    100%{
        transform: translateY(0);
    }
}


header{
    animation: down 1s 1;
}

 h1{
     animation: ltr 2s 1;
     
 }



@keyframes ltr{
    0%{
        transform: translateX(-100px);
        color: cyan;
    }

50%{
    transform: translateX(150px);
}



70%{
    transform: translateX(-150px);
}

    100%{
        transform: translateX(0);
    }
}



.sub-ul, .sub-sub-ul{
    animation: hoverrr 1s 1;
}

@keyframes hoverrr{


0%{
    opacity: 0;
}

100%{
opacity: 1;
}


}


span{
    animation: heart 2s infinite linear;
}

@keyframes heart{
    0%, 100%{
opacity: 0;
    }

    50%{
opacity: 1;
    }
}


/* ==============================
     Animation for mobile
=============================== */


.show-on-click, .sub-div, .sub-sub-div{
    animation: move 1s 1;
}

@keyframes move{
    0%{
        transform: translateX(100px);
    }

    50%{
        transform: translateX(-100px);
    }

    100%{
        transform: translateX(0);
    }
}