Palavras permaneceram muito grandes

Boa noite, após seguir os passos instruídos nessa 'aula 07 - Melhorando a qualidade das palavras' , todas as palavras em questão permaneceram enormes no header da página, quando deveriam ter voltado ao tamanho original.

HTML:

    <header class="titulo-principal">
        <img class="foto-home" src="imagens/eu.jpg" alt="Foto de João da Silva">
        <h1>João da Silva</h1>
        <p class="subtitulo-principal">Desenvolvedor web</p>
        <ul class="palavras-home">
            <li class="palavra-home eficiencia">Eficiência</li>
            <li class="palavra-home boas-praticas">Boas práticas</li>
            <li class="palavra-home codigo-limpo">Código limpo</li>
            <li class="palavra-home css3">CSS3</li>
            <li class="palavra-home html5">HTML5</li>
            <li class="palavra-home javascript">JavaScript</li>
            <li class="palavra-home acessibilidade">Acessibilidade</li>
            <li class="palavra-home responsivo">Responsivo</li>
            <li class="palavra-home otimizacoes">Otimizações</li>
            <li class="palavra-home agilidade">Agilidade</li>
            <li class="palavra-home design">Design</li>
        </ul>
        <a class="banner-twitter" href="https://twitter.com/joaodasilva">Siga-me no Twitter</a>
    </header>

CSS

.palavra-home {
    position: absolute;
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
    font-size: 0.4em;
}
.palavras-home {
    perspective: 6px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.palavras-home li {
    font-size: 400%;
}
.eficiencia {
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(4px) scale(0.25);
}

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

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

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

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

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

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

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

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

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

.design {
    top: 40%;
    left: 60%;
    transform: translate(-50%, -50%) rotate(10deg) translateZ(2px) scale(0.25);
}