.fade{
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1s;
    animation-name: fade;
    animation-duration: 1s;
}
@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.heroText{
    -webkit-animation-name: fadeCenter;
    -webkit-animation-duration: 1s;
    animation-name: fadeCenter;
    animation-duration: 1s;
}

@keyframes fadeCenter {
    from{
        opacity: 0;
        transform: translateY(50px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes typing{
    from{
        width: 0;
    }
    to{
        width:100%;
    }
}
@keyframes blink{
    from,to {
        border-color: orange;
    }
    50% {
        border-color: transparent;
    }
}