[Proyecto] Haga lo que hicimos

/* 
    . -> sirve para decrlarar clases
    * -> para hacer referencia a un cambio universal
*/

/*importar las fuentes*/
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
*{
    padding: 0;
    margin: 0;
}

:root{
    --color--primario: #000000;
    --color--secundario: #f6f6f6;
    --color--terceario: #22D4FD;
    --color--hover: #272727;

    --fuente--moserrat: "Montserrat", sans-serif;
    --fuente--krona: "Krona One", sans-serif;
}

body{
    background-color: var(--color--primario);
    color: var(--color--secundario);
    box-sizing: border-box;/*para adaptar los objetos según el tamaño de la pantalla*/
}

.header{
    padding: 2% 0% 0% 15%;
}
.headerMenu{
    display: flex;
    gap: 80px;
}

.headerMenuLink{
    font-size: 1.5rem;
    font-family: var(--fuente--moserrat);
    font-weight: 600;
    color: var(--color--terceario);
    text-decoration: none;
}

/*añade el subrayado al título y el alineado*/
h1{
    color: white;
    text-align: justify;
}

.tituloDestaque{
    color: var(--color--terceario);
}
/*Alinea los textos*/
.presentacion{
    display: flex;
    align-items: center;
    padding: 5.87% 15%;
    justify-content: space-between;
}

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

/*estilos de la fuente de párrafo y título*/
.presentacionTitulo{
    font-size: 2.25rem;
    font-family: var(--fuente--krona);
}

.presentacionParrafo{
    font-size: 1.5rem;
    font-family: var(--fuente--moserrat);
}

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

.presentacionEnlacesLink{
    width: 378px;
    color: var(--color--secundario);
    text-align: center;
    padding: 21.5px 0;
    border-radius: 8px;
    font-family: var(--fuente--moserrat);
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--color--terceario);
    display: flex;
    justify-content: center;
    gap: 10px;
}

.presentacionEnlacesSubtitulo{
    color: var(--color--secundario);
    font-family: var(--fuente--krona);
    font-size: 1.5rem;
    font-weight: 400;
}

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

h1:hover{
    background-color: var(--color--secundario);
}

.Footer{
    background-color: var(--color--terceario);
    padding: 24px;
    color: var(--color--primario);
    text-align: center;
    font-family: var(--fuente--moserrat);
    font-size: 1.5rem;
    font-weight: 400;
}