Desafío: personalizando el proyecto con hover

    <main class="presentacion">
        <section class="presentacion__contenido">
        <h1 class="presentacion__titulo">Descubre mi portafolio y explora cómo la <strong class="destacado">y el diseño se unen para comunicar ideas de manera impactante.</strong></h1>
        
        <p class="introduccion">¡Hola! Soy Javier Espinoza, diseñador UI/UX con experiencia en Figma, HTML5, CSS y React.</p>

        <div class="botones__enlaces">
            <h2 class="botones__enlaces__subtitulo">Accede a mis redes:</h2>
            <a class="boton__enlaces__link" href="https://www.instagram.com/"><img src="./assets/instagram.png">Instagram</a>
            <a class="boton__enlaces__link" href="https://www.github.com/"><img src="./assets/github.png">Github</a>
        </div>

        </section>
        <img class="imagen" src="./assets/linkedin.jpg" alt="Mi Foto">
    </main>
    <footer>
        <p class="jep">© 2024 Javier Espinoza Padilla</p>
    </footer>
</body>
</html>


   * {
padding: 0;
margin: 0;
 }

body {
background-color: #03071E;
height: 100vh;
box-sizing: border-box;
}

.destacado {
color: #FAA307;
}
.presentacion {
display: flex;
align-items: center;
margin: 10% 12%;
justify-content: space-between;
}
.presentacion__contenido {
width: 615px;
display: flex;
flex-direction: column;
gap: 40px;
}
.introduccion {
font-family: Arial, Helvetica, sans-serif; 
color: white;
font-size: 24px;
}
.presentacion__titulo {
font-size: 36px;
color: white;   
}
.botones__enlaces {
display:flex; /*Coloca los cuadrados uno al lado del otro*/
justify-content:space-around; 
flex-direction: column;
align-items: center;
gap: 32px; /*Agrega espacios iguales entre cada cuadro*/
}
.boton__enlaces__link {
width: 378px;
text-align: center;
padding: 21.5px 0;
border-radius: 8px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
color: #F6F6F6;
text-decoration: none;
font-size: 24px;
border: 2px solid #FAA307;
transition: all 0.3s ease-in;
display: flex;
justify-content: center;
gap: 10px;

}
.boton__enlaces__link:hover {
background-color: #0d1129;
}
.botones__enlaces__subtitulo {
font-family:Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: 700;
color: #F6F6F6;
}
.imagen {
width: 450px; 
border-radius: 6px;  
}
.jep {
text-align: center;
color: rgb(168, 167, 167);
}