Haga lo que hicimos en aula | HTML y CSS: header, footer y variables CSS | Alura Latam

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

{
padding: 0;
margin: 0;
}

body {
background-color: #000000;
color: #F6F6F6;
box-sizing: border-box;
}

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

.presentacion {
display: flex;
align-items: center;
justify-content: space-between;
margin: 10% 15%;

}

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

.presentacion__contenido__titulo {
font-size: 36px;
font-family: "Krona One", sans-serif;

}

.presentacion__contenido__texto {
font-size: 24px;
font-family: "Montserrat", sans-serif;

}

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

.presentacion__enlaces_link {
width: 378px;
text-align: center;
padding: 21.5px 0;
border-radius: 8px;

font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: 600;
text-decoration: none;
color: #F6F6F6;
border: 2px solid #22D4FD;
display: flex;
justify-content: center;
gap: 10px;

}

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

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

.footer {

background-color: #22D4FD;
padding: 24px;
color: #000000;
text-align: center;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: 400;

}

.header__menu {
display: flex;
color: #22D4FD;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: 400;
padding: 65px;
margin: 40px;
gap: 80px;
}
Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

¡Hola Estudiante, espero que estés bien!

Parece que estás trabajando en varios ajustes de diseño para tu sitio web. Aquí te dejo algunas sugerencias basadas en lo que mencionaste:

Personalización del pie de página: Asegúrate de que tu clase .footer tenga las propiedades correctas:

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

Ajuste del espaciado interno en .presentacion: Cambia margin por padding en la clase .presentacion y ajusta el valor para mejorar la estética:
```
.presentacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5%;
}
```
Eliminación de height: 100vh: Si tienes una línea con height: 100vh en el body, coméntala para ver cómo afecta al diseño:
```
/* height: 100vh; */
```

Estilización del encabezado: Asegúrate de que los enlaces en el encabezado estén bien estilizados y tengan un efecto hover:

.header__menu a {
    color: #22D4FD;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 400;
    margin: 0 20px;
    text-decoration: none;
}

.header__menu a:hover {
    color: #FFFFFF;
}

Ajuste del espaciado interno de los enlaces: Asegúrate de que los enlaces tengan suficiente padding para mejorar la legibilidad:
```
.header__menu a {
    padding: 10px 20px;
}
```

Espero que estas sugerencias te ayuden a lograr el diseño que buscas. ¡Bons estudios!