estilização concluída

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

:root{
    --cor-primaria: #2C3639;
    --cor-secundaria: #DCD7C9;
    --cor-terciaria: #A27B5C;
    --cor-hover:#3F4E4F;

    --font-primaria:'Krona One', sans-serif;
    --font-secundaria: 'Montserrat', sans-serif;
}
*{
    margin: 0;
    padding: 0;
}
body{
    /* height: 100vh; */
    box-sizing: border-box;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
}

.cabecalho{
    padding: 2%  /*preenchimento superio*/ 0% /*preenchimento direito*/ 0% /*preenchimento inferior*/ 15% /*preenchimento esquerdo*/ ;
}

.cabecalho__menu{
    display: flex;
    gap: 80px;
}
.cabecalho__menu__link{
    font-family: var(--font-secundaria);
    font-size: 24px;
    font-weight: 600;
    color: var(--cor-terciaria)  ;
    text-decoration: none;
    /* margin-right: 20px; */
}

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

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

.titulo-destaque{
    color: var(--cor-terciaria);
}

.apresentacao__conteudo__titulo{
    font-size: 36px;
    font-family: var(--font-primaria);
}

.apresentacao__conteudo__texto{
    font-size: 20px;
    font-family: var(--font-secundaria);
}

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

.apresentaxao__links__subtitulo{
    font-family: var(--font-primaria);
    font-weight: 400;
    font-size: 24px;

}

.apresentacao__links__link {
    /* background-color: #22D4FD; */
    display: flex;  /* posicionando elementos */
    justify-content: center; /* posicionando elementos */
    gap: 16px; /* posicionando elementos */
    border: 2px solid var(--cor-terciaria);
    width: 280px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: var(--cor-secundaria);
    font-family: var(--font-secundaria);
    margin: 5px 15px 15px 20px; /* topo, direita, fundo, esquerda */

}

.apresentacao__links__link:hover{
    display: inline-block; /* Para garantir que o padding e o background funcionem corretamente */
    padding: 10px 20px; /* Adicione algum espaço interno */
    background-color: var(--cor-hover) ;/* Muda a cor de fundo do elemento */
    color: yellow;
    transition: all 0.3s ease; /* Transição suave para todos os estilos */        
    border: 4px solid #ff0000;
    animation: bordaAnimada 2s linear infinite; /* Define a animação */
}

@keyframes bordaAnimada { /* Define os passos da animação */
  0% {
    border-color: #22D4FD; /* Cor inicial da borda */
  }
  50% {
    border-color: #0000FF ; /* Cor intermediária da borda */
  }
  100% {
    border-color: #ffff00; /* Cor final da borda */
  }
}

.apresentacao__links__link img:hover {
    transform: scale(2.2); /* Aumenta a imagem  */
}

.apresentacao__links__link:hover {
    border: 2px solid #0000FF;
}

/* Estilizando imagem  */
img[alt="minha selfie"] {
    border-radius: 10px; /* Define o raio da borda arredondada */
    border: 4px solid #ff0000;
    animation: bordaAnimada 5s linear infinite; /* Define a animação */
}

@keyframes bordaAnimada { /* Define os passos da animação */
  0% {
    border-color: #22D4FD; /* Cor inicial da borda */
  }
  50% {
    border-color: #0000FF ; /* Cor intermediária da borda */
  }
  100% {
    border-color: #ffff00; /* Cor final da borda */
  }
}

.rodape{
    padding: 24px;
    color: var(--cor-primaria);
    background-color: var(--cor-terciaria);
    text-align: center;
    font-family: var(--font-secundaria);
    font-size: 24px;
    font-weight: 400;
}