[Projeto] Desafio Currículo | HTML e CSS: cabeçalho, footer e variáveis CSS

**Vou subir o código do CSS nos comentários pois ultrapassou o limite aqui rs. **

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Currículo</title>
  <link rel="stylesheet" href="./styles/style.css">
</head>

<body>
  <header class="cabecalho">
    <nav class="cabecalho__menu">
      <a class="cabecalho__menu__link" href="index.html">Home</a>
      <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
      <a class="cabecalho__menu__link" href="curriculo.html">Currículo</a>
    </nav>
  </header>

  <main class="apresentacao">

    <section class="apresentacao__conteudo__curriculo">
      <h1 class="apresentacao__conteudo__titulo_curriculo">Thiago Costa Castilho</h1>
      <h3 class="apresentacao__conteudo__subtitulo_curriculo">Experiência Profissional
        <hr>
      </h3>
      <p class="apresentacao__conteudo__texto__curriculo">Tenho aproximadamente 8 anos de experiência como QA. Iniciei
        minha carreira na RSI Informática, atualmente conhecida como Keeggo, onde tive a oportunidade de trabalhar com
        diversas tecnologias voltadas para Front-End, Back-End, Desktop e Mobile. Em seguida, integrei o time do Grupo
        HDI, onde enfrentei o desafio estimulante de atuar com tecnologias de PDV (Ponto de Venda), uma experiência que
        expandiu significativamente meu conhecimento técnico. Atualmente, faço parte da GFT Brasil, uma empresa onde
        tenho a chance de aprender continuamente e colaborar em um projeto internacional, o que tem sido extremamente
        enriquecedor.</p>
      <ul class="apresentacao__conteudo__lista_experiencia_curriculo">
        <li class="apresentacao__conteudo__lista__experiencia__item_curriculo"><a href="https://www.gft.com/br/pt">GFT
            Brasil</a></li>
        <li class="apresentacao__conteudo__lista__experiencia__item_curriculo"><a href="https://www.grupohdi.com/">Grupo
            HDI</a></li>
        <li class="apresentacao__conteudo__lista__experiencia__item_curriculo"><a href="https://keeggo.com/">RSI
            Informática (Keeggo)</a>
        </li>
      </ul>

      <h3 class="apresentacao__conteudo__titulo_curriculo">Tecnologias</h3>
      <h3 class="apresentacao__conteudo__subtitulo_curriculo">Ferramentas de automação
        <hr>
      </h3>

      <div class="apresentacao__conteudo__lista__tecnologias__curriculo">
        <a href="https://www.selenium.dev/documentation/"><img class="icon__curriculo" src="./assets/selenium.png"
            alt="Logo Selenium">Selenium</a>
        <a href="https://appium.io/docs/en/latest/"><img class="icon__curriculo" src="./assets/appium.svg"
            alt="Logo Appium">Appium</a>
        <a href="https://www.cypress.io/"><img class="icon__curriculo" src="./assets/cypress.svg"
            alt="Logo Cypress">Cypress</a>
        <a href="https://playwright.dev/"><img class="icon__curriculo" src="./assets/playwright.svg"
            alt="Logo Playwright">Playwright</a>
      </div>
      <a class="apresentacao__conteudo__baixar_curriculo"
        href="https://www.linkedin.com/in/thiago-costa-castilho/">Baixar CV
        Completo</a>


    </section>

    <img class="apresentacao__foto__curriculo" src="./assets/thiago-castilho-business-profile-pic.jpeg"
      alt="Thiago Castilho posando para foto.">

  </main>

  <footer class="rodape">Desenvolvido por Thiago Castilho.</footer>

</body>

</html>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Código do CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
}

body {
  /* height: 100vh; */
  box-sizing: border-box;
  background-color: black;
  color: #F6F6F6;
  /* overflow: hidden; */
}
.cabecalho {
  padding: 2% 0% 0% 15%;
}

.cabecalho__menu {
  display: flex;
  gap: 80px;
}

.cabecalho__menu__link {
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #22D4FD;
  text-decoration: none;
}


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

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

.apresentacao__conteudo__titulo {
  font-size: 36px;
  font-family: "Krona One", sans-serif;
  font-weight: 400;
}

.titulo-destaque {
  color: #22D4FD;
}

.apresentacao__conteudo__curriculo {
  width: 715px;
  display: flex;
  flex-direction: column;
}

.apresentacao__conteudo__titulo_curriculo {
  font-size: 36px;
  font-family: "Krona One", sans-serif;
  font-weight: 400;
  border: #22D4FD solid 2px;
  color: #F6F6F6;
  text-align: center;
  padding: 1%;
  margin-bottom: 5%;
}

.apresentacao__conteudo__titulo_curriculo:hover {
  color: #22D5E4;
  cursor: none;
}

.apresentacao__conteudo__subtitulo_curriculo {
  font-size: 17px;
  font-family: "Krona One", sans-serif;
  font-weight: 400;
  margin-bottom: 2%;
}

.apresentacao__conteudo__lista_experiencia_curriculo {
  display: flex;
  margin-bottom: 3%;
  justify-content: space-evenly;
}

.apresentacao__conteudo__texto__curriculo {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 15px;
  margin-bottom: 2%;
  text-align: justify;
}

.apresentacao__conteudo__lista__experiencia__item_curriculo a {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 15px;
  text-decoration: none;
  color: #F6F6F6;
}

.apresentacao__conteudo__lista__experiencia__item_curriculo a:hover {
  color: #22D4FD;
}

.apresentacao__conteudo__lista__tecnologias__curriculo {
  display: flex;
  justify-content: center;
  gap: 60px;
  font-size: 24px;
  padding: 15px 0px;
  text-decoration: none;
  color: #F6F6F6;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

.apresentacao__conteudo__lista__tecnologias__curriculo a{
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.apresentacao__conteudo__lista__tecnologias__curriculo a {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 15px;
  text-decoration: none;
  color: #F6F6F6;
}

.apresentacao__conteudo__lista__tecnologias__curriculo a:hover {
  color: #22D4FD;
}

.icon__curriculo {
  transition: transform 0.2s ease-in-out;
  width: 2.5rem;
  text-align: center;
}

.icon__curriculo:hover {
  transform: scale(1.2);
}

.apresentacao__conteudo__texto {
  font-size: 24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}

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

.apresentacao__links__subtitulo {
  font-family: "Krona One", sans-serif;
  font-weight: 400;
  font-size: 24px;
}

.apresentacao__links__link {
  display: flex;
  justify-content: center;
  gap: 16px;
  border: #22D4FD solid 2px;
  width: 378px;
  text-align: center;
  border-radius: 8px;
  font-size: 24px;
  padding: 21.5px 0px;
  text-decoration: none;
  color: #F6F6F6;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

.apresentacao__links__link:hover {
  background-color: #272727;
  width: 368px;
}

.apresentacao__foto__curriculo {
  border-radius: 50%;
  transition: transform 0.3s ease-in-out;
}

.apresentacao__foto__curriculo:hover {
  transform: scale(1.5);
}

.apresentacao__conteudo__baixar_curriculo {
  border: #22D4FD solid 2px;
  margin-top: 2%;
  width: 210px;
  text-align: center;
  border-radius: 50px;
  font-size: 15px;
  padding: 21.5px 0px;
  text-decoration: none;
  color: #F6F6F6;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

.apresentacao__conteudo__baixar_curriculo:hover {
  background-color: #272727;
}

.rodape {
  color: black;
  background-color: #22D4FD;
  text-align: center;
  padding: 23.64px;
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 400;
}

Mergulhe em programação