[Projeto] evoluindo cada vez mais o codigo completo com a implementação da animação | HTML e CSS: cabeçalho, footer e variáveis CSS

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portifolio</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>

<body>
    <header class="cabeçalho">
        <nav class="cabeçalho__menu">
            <a class="cabeçalho__menu-link" href="./index.html">Home</a>
            <a class="cabeçalho__menu-link" href="./about.html">Sobre mim</a>
        </nav>
    </header>
    <main class="container__principal">
        <section class="container__conteudo">
            <h1 class="container__titulo">
                Eleve seu negócio digital a outro nível
                <strong class="titulo__destaque">com um Front-end de qualidade!</strong>
            </h1>
            <p class="container__paragrafo">Meu nome é Samuel Carvalho da Silva e sou um <strong
                    class="titulo__destaque__paragrafo">desenvolvedor mobile e
                    desenvolvedor front-end especializado em React e Angular</strong>, ajudo pequenos negócios e
                designers a colocarem em
                prática boas ideias. Estou ansioso para trabalhar em projetos desafiadores e inovadores que possam
                impactar
                positivamente a vida das pessoas.</p>
            <div class="container__links">
                <h2 class="minhas__redes">Acesse minhas redes: </h2>
                <a class="container__lista__redes" href="https://www.instagram.com/samucacs_/">
                    <img src="img/instagram.png" alt="logo instagram">
                    instagram
                </a>
                <a class="container__lista__redes"
                    href="https://www.linkedin.com/in/samuel-carvalho-silva-337a281b3/?trk=opento_sprofile_topcard">
                    <img class="imagem__logo" src="img/linkedin.png" alt="logo linkedln">
                    linkedln
                </a>
            </div>
        </section>
        <img class="imagem__logo" src="img/samuel espelho.png" alt="foto samuel carvalho">
    </main>
    <footer class="rodape">
        entre em contato: samuel.plenitude12@gmail.com
    </footer>
</body>

</html>

:root {
    --fonte-principal: 'Roboto';
    --fonte-secudario: 'Montserrat', sans-serif;
    --color-hover: #272727;
    --cor-azul: #22D4FD;
    --preto: #000000;
    --branco: #F6F6F6;
    --cinza: #C0C0C0;
}

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    box-sizing: border-box;
    background: var(--preto);
    color: var(--branco);
    font-family: var(--fonte-secudario);
    font-family: var(--fonte-principal);

}

.cabeçalho {
    padding: 2% 0 0 15%;
}

.cabeçalho__menu {
    display: flex;
    gap: 80px;
}

.cabeçalho__menu-link {
    color: var(--cor-azul);
    font-family: var(--fonte-secudario);
    text-decoration: none;
    font-size: 24px;
    font-weight: 600;

}

.titulo__destaque {
    color: var(--cor-azul);
    font-size: 38px;
}

.titulo__destaque__paragrafo {
    color: var(--cor-azul);
    font-size: 24px;
    font-family: var(--fonte-principal);
}

.container__principal {
    padding: 5% 15%;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.container__conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.container__titulo {
    font-size: 36px;
    font-family: var(--fonte-secudario);

}

.container__paragrafo {
    font-size: 24px;
    color: var(--cinza);
    font-family: var(--fonte-secudario);
}

.container__links {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.container__lista__redes {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 378px;
    text-align: center;
    color: var(--branco);
    border-radius: 8px;
    font-size: 24px;
    padding: 21.5px 0;
    text-decoration: none;
    margin-top: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border: 2px solid #22D4FD;

}

.minhas__redes {
    font-family: var(--fonte-secudario);
    font-weight: 600;
    font-size: 24px;
}

.container__lista__redes:hover {
    background: var(--color-hover);
}

.container__lista__redes,
.imagem__logo,
.container__titulo,
.container__paragrafo,
.container__links {
    animation: fade-in 2s ease-in-out;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.rodape {
    text-align: start;
    background: var(--cor-azul);
    color: var(--preto);
    padding: 15px;
    font-family: var(--fonte-principal);
    font-size: 20px;
    font-weight: 400;
    text-align: center;
}