body{
    width:100vw;
    height:100vh;
    padding:0;
    margin:0;
    overflow-x:hidden ;
}

header{
    margin:0;
    top:0;
    left:0;
    position:relative;
    width:100vw;
    height:16vh;
    display:flex;
    justify-content: center;
    align-content: space-around;
    flex-wrap: wrap;
}


a{
    transform: translate(-50%, -50%);
    z-index:1000;
    position: fixed;
    top:50vh;
    left:7vw;
    width:3.5vw;
    height:auto;
}

a>img{
    width:3.5vw;
    height:auto;
}

a>img:hover{
    width:3.8vw;
    height:auto;
}


.linha{
    width:100vw;
    height:6vh;
    display:flex;
    justify-content: space-around;

}

/* The animation code */
@keyframes letras {
    from {opacity: 0;}
    to {opacity: 100%;}
}

header>.linha>img{
    opacity: 0;
}


#a{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:0.2s;
    animation-fill-mode: forwards;
}

#b{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:0.8s;
    animation-fill-mode: forwards;

}

#c{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:1s;
    animation-fill-mode: forwards;

}

#d{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:1.2s;
    animation-fill-mode: forwards;

}

#e{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:1.4s;
    animation-fill-mode: forwards;

}

#f{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:1.6s;
    animation-fill-mode: forwards;

}

#g{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:1.8s;
    animation-fill-mode: forwards;

}

#h{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:2s;
    animation-fill-mode: forwards;

}
#i{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:2.2s;
    animation-fill-mode: forwards;

}

#j{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:2.4s;
    animation-fill-mode: forwards;

}

#k{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:2.6s;
    animation-fill-mode: forwards;

}

#l{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:0.4s;
    animation-fill-mode: forwards;

}
#m{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:2.8s;
    animation-fill-mode: forwards;

}

#n{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:3s;
    animation-fill-mode: forwards;

}

#o{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:3.2s;
    animation-fill-mode: forwards;

}

#p{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:3.4s;
    animation-fill-mode: forwards;

}
#q{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:3.6s;
    animation-fill-mode: forwards;

}

#r{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:3.8s;
    animation-fill-mode: forwards;

}

#s{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:4s;
    animation-fill-mode: forwards;

}

#t{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:0.6s;
    animation-fill-mode: forwards;

}
#u{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:4.2s;
    animation-fill-mode: forwards;

}

#w{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:4.4s;
    animation-fill-mode: forwards;

}

#v{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:4.6s;
    animation-fill-mode: forwards;

}

#x{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:4.8s;
    animation-fill-mode: forwards;

}

#y{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:5s;
    animation-fill-mode: forwards;

}

#z{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:5.2s;
    animation-fill-mode: forwards;

}


footer{
    margin:0;
    left:0;
    position:relative;
    float:bottom;
    width:100vw;
    height:16vh;
    display:flex;
    justify-content: center;
    align-content: space-around;
    flex-wrap: wrap;
}


footer>.linha>img{
    opacity: 0;
}


#a1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:0.2s;
    animation-fill-mode: forwards;
}

#b1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:0.4s;
    animation-fill-mode: forwards;

}

#c1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:2s;
    animation-fill-mode: forwards;

}

#d1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:3s;
    animation-fill-mode: forwards;

}

#e1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:3.5s;
    animation-fill-mode: forwards;

}

#f1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:4s;
    animation-fill-mode: forwards;

}

#g1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:4.5s;
    animation-fill-mode: forwards;

}

#h1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:5s;
    animation-fill-mode: forwards;

}
#i1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:0.6s;
    animation-fill-mode: forwards;

}

#j1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:5.5s;
    animation-fill-mode: forwards;

}

#k1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:6s;
    animation-fill-mode: forwards;

}

#l1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:6.5s;
    animation-fill-mode: forwards;

}
#m1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:7s;
    animation-fill-mode: forwards;

}

#n1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:7.5s;
    animation-fill-mode: forwards;

}

#o1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:8s;
    animation-fill-mode: forwards;

}

#p1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:8.5s;
    animation-fill-mode: forwards;

}
#q1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:9s;
    animation-fill-mode: forwards;

}

#r1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:9.5s;
    animation-fill-mode: forwards;

}

#s1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:10s;
    animation-fill-mode: forwards;

}

#t1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:10.5s;
    animation-fill-mode: forwards;

}
#u1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:11s;
    animation-fill-mode: forwards;

}

#w1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:11.5s;
    animation-fill-mode: forwards;

}

#v1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:12s;
    animation-fill-mode: forwards;

}

#x1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:0.8s;
    animation-fill-mode: forwards;

}

#y1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:12.5s;
    animation-fill-mode: forwards;

}

#z1{
    animation-name: letras;
    animation-duration: 1s;
    animation-delay:13s;
    animation-fill-mode: forwards;

}