body{
    font-family: 'Uncial Antiqua', serif;
        color: rgb(185, 152, 76);
}

.container { display: inline-block;}

@keyframes block{
    from {
        opacity: 0;
        scale: 0.5;

    } 
    to {
        opacity:1;
        scale:1;
    }
}

    .block { 
        animation: block both;
        animation-timeline: view();
        animation-range: entry 20% cover 100vh;
        
    }

/*Image animation*/

@keyframes imagereveal{
    from {
        filter: saturate(0) contrast(4) brightness(.1) blur(5px);
        opacity: 0;
        scale: 0.95;
        translate: 0 4rem;

    } 
    to {
        filter: none;
        opacity:1;
        scale:1;
        translate: 0 0;
    }
}
    .imagereveal {
        animation: imageReveal both;
        animation-timeline: view(50% 10%);
        animation-range: entry 20% cover 100vh;
        

    }

/*Write animation*/


/*Cursos a piscar*/

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes cursor {
  from { border-right: 2px solid transparent }
  to { border-right: 2px solid black }
}

@keyframes typewriter {
  from { width: 0 }
  to { width: 100% }
}


/*Footer animation*/

.foot {

    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 3.3s steps(16),
    cursor .4s step-end infinite alternate;

}