As palavras não ficam na parte superior da página

Código css :

.palavra-home{
    font-size: 1.5rem;
    font-family: "Shadows Into Light";
    color: #D5447E;
    font-weight: bold;
    position: relative; 
    transform-style: preserve-3d;
}

.eficiencia {
    top: 20%;
    left: 10%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(4px);
}

.boas-praticas {
    top: 70%;
    left: 20%;
    transform: translate(-50%, -50%) rotate(10deg) translateZ(1px);
}

.codigo-limpo {
    top: 45%;
    left: 25%;
    transform: translate(-50%, -50%) rotate(-10deg) translateZ(2px);
}

.css3 {
    top: 55%;
    left: 35%;
    transform: translate(-50%, -50%) rotate(5deg) translateZ(2px);
}

.html5 {
    top: 30%;
    left: 65%;
    transform: translate(-50%, -50%) rotate(10deg) translateZ(2px);
}

.javascript {
    top: 15%;
    left: 60%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(1px);
}

.acessibilidade {
    top: 30%;
    left: 35%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(3px);
}

.responsivo {
    top: 40%;
    left: 40%;
    transform: translate(-50%, -50%) rotate(10deg) translateZ(3px);
}

.otimizacoes {
    top: 70%;
    left: 65%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(2px);
}

.agilidade {
    top: 75%;
    left: 35%;
    transform: translate(-50%, -50%) rotate(5deg) translateZ(1px);
}

.palavras-home{
    position: absolute;
    perspective: 6px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Fala Irley, tudo bom?

Cara fiz uns testes aqui e não consegui simular o problema, poderia compartilhar seu código comigo, subindo ele todo no github para eu conseguir dar uma resposta mais acertiva? Vaaleu! qualquer coisa só chamar :)

Esse é meu repositório no github: https://github.com/IgorDoido/HTML5CSS3Onde o projeto se encontra index.html e o css dele