/* HEADER */
@keyframes header_name_animation {
   from {
        opacity: 0;
        transform: translateY(-100px);
   } 
    to {
        opacity: 1;
        transform: translateY(0);
   }
}

@keyframes header_name_bar_animation {
    from {
        width: 0;
        border: 0.25vh solid #fff;
    }
    to {
        width: inherit;
        border: 0.25vh solid #fff;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-in-right2left {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes fade-in-left2right {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes scroll-left{
    0%{
        transform: translateX(95vw);
        opacity: 0;
    }
    10%{
        opacity: 0;
    }
    20%{
        opacity: 1;
    }
    80%{
        opacity: 1;
    }
    90%{
        opacity: 0;
    }
    100%{
        transform: translateX(0vw);
        opacity: 0;
    }
}


@keyframes scroll-right {
    0%{
        transform: translateX(0vw);
        opacity: 0;
    }
    10%{
        opacity: 0;
    }
    20%{
        opacity: 1;
    }
    80%{
        opacity: 1;
    }
    90%{
        opacity: 0;
    }
    100%{
        transform: translateX(95vw);
        opacity: 0;
    }
}

@keyframes cursor {
    50% { border-color: transparent }
}

@keyframes typing {
    from {
        max-width: 0; color: #fff; border-right: 5px solid #fff; border-left: none;}
    99% {
        border-right: 5px solid #fff;
    }
    100% {
        max-width: 100%;
        border-right: none;
        border-left: none;
        color: #fff;    
    }
}

@keyframes typing2 {
    from {
        max-width: 0; color: #fff; border-right: 5px solid #fff; border-left: none;}
    100% {
        max-width: 100%;
        border-right: 5px solid #fff;
        border-left: none;
        color: #fff;
    }
}

@keyframes scroll-left-project {
    0%{
        transform: translateX(93vw);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100%{
        transform: translateX(0vw);
        opacity: 0;
    }
}