/* PROJECTE: MomTips
   AUTORES: Rim el Mousati, Salma Bouzidi i Carla Ballester
   Full d'estils global per a tot el lloc web
*/
* {
    margin: 0; /*Elimina el marge per defecte de tots els elements de la pàgina */
    padding: 0; /* Elimina el el marge intern per defecte de tots els elements */
    box-sizing: border-box; /*Fa que l'amplada i alçada de les caixes incloguin el marge i la vora */
}

body {
    font-family: calibri, sans-serif; /*Defineix la tipografia principal de tota la web per a que sigui calibri */
    line-height: 28px; /*Fixa l'alçada de les línies del text*/
    color: grey; /*Pinta el text general de color gris*/
    background-color: pink; /*Posa un fons rosa general a tota la pantalla */
}

/* CAPÇALERA --> HEADER */
header {
    background-color: pink; /*Color de fons rosa pastel suau per a la capçalera*/
    padding: 32px; /*Espaiat intern de 32 píxels a tots els costats de la capçalera */
    text-align: center; /* VERD: Centra tots els elements que hi ha dins del header, com ara el logo i el títol */
}

header img {
    max-width: 180px; /* L'amplada de la imatge del logo és d'un màxim de 180 píxels*/
    height: auto;  /* Fa que l'alçada s'ajusti automàticament*/
    margin-bottom: 16px; /*Afegeix un espai a sota del logo per separar-lo del títol.*/
}

header h1 {
    font-family: calibri, sans-serif; /*Defineix la tipografia per al títol principal, que serà calibri*/
    color: white; /*La ipografia dle títol és de color blanc*/
    font-size: 48px; /*Fixa la mida de la lletra del títol en 48 píxels */
}

header p {
    font-family: calibri, sans-serif; /* La tipografia és calibri */
    color: pink; /* La tipografia és de color rosa */
}

/* Nav --> navegació constant */
nav {
    background-color: white; /*Posa el fons de la barra de menú de color blanc */
    padding: 16px 0; /* Afageix 16 píxels a dalt i a baixs, però 0 als costats*/
    top: 0; /* Així la barra es posiciona a dalt*/
    z-index: 1000; /* Estarà a dalt tota l'estona */
}

nav ul {
    list-style: none; /*Treu els punts de la llista del menú. */
    display: flex; /* Posa els elements en línea*/
    justify-content: center; /* Centra horitzontalment els elements del menú a la pantalla */
    gap: 20px; /*Crea una separació constant de 20 píxels entre cada botó del menú */
}

nav a {
    text-decoration: none; /*Elimina el subratllat clàssic dels enllaços o altres decoracions*/
    color: black; /* Pinta el text dels enllaços de color negre */
    font-family: calibri, sans-serif; /*La font serà calibri */
    padding: 8px 16px;
}

nav a:hover {
    background-color: pink; /* Així quan passem el ratolí per damunt es veurà de color rosa*/
}

/* CONTINGUT PRINCIPAL --> MAIN */
main {
    max-width: 1000px; /*Limita l'amplada màxima del bloc central a 1000 píxels */
    margin: 32px auto; /* Centra el bloc main a la pantalla i afegeix un marge de 32 píxels a dalt i a baix */
    padding: 0 32px; /* Posem un marge perquè així el text no toca la vora */
}

section {
    margin-bottom: 48px; /* Separa una secció de la següent deixant 48 píxels de distància */
    background: white;  /* Posa un fons blanc a cada secció, ja que el fons és rosa*/
    padding: 32px; /* Hi ha 32 píxels de marge a dins de la secció */
}

h2 {
    color: pink; /* Pinta els títols de les seccions (els que són h2) de color rosa */
    margin-bottom: 14px; /* Espai a sota del títol de 14 píxels per separar-lo del text */
}

article {
    margin-bottom: 16px; /*Separa cada article del següent deixant un espai entre seccions de 16 píxels*/
}

h3 {
    color: grey; /* Pinta els títols (que són h3) de color gris */
    margin-bottom: 16px; /*Afegeix un espai de 16 píxels a sota del títol h3 */
}

/* PEU DE PÀGINA --> FOOTER */
footer {
    background-color: white; /*Posa un fons blanc al peu de pàgina */
    text-align: center; /*Centra tot el text del peu de pàgina */
    padding: 16px; /* Afegeix una separació de 16 píxels a tot el voltant */
    margin-top: 32px; /*Separa el footer del contingut de dalt per 32 píxels */
    font-size: 16px; /*Fixa la mida de la font del footer en 16 píxels */
	font-family: calibri, sans-serif; /* Lletra en calibri */
}

/* TAULES */
table {
    width: 100%; /*La taula s'estiri fins a ocupar el 100% de l'amplada disponible */
    margin: 16px; /*Afegeix un marge exterior de 16 píxels */
}

th, td {
    border: 1px solid black;/* Crea una línia fina de color negre per dibuixar la taula */
    padding: 12px; /*Afegeix un espai de 12 píxels a l'interior de cada cel·la */
    text-align: center; /*  Alinea els textos de les cel·les cap a al centre */
}

th {
    background-color: white; /*Defineix el fons de la capçalera de la taula en blanc */
    color: white;
}

/* Estil per a la taula */
table {
    width: 100%;
    border-collapse: collapse; /* Elimina l'espai entre bordes */
    margin: 20px 0; /* Afegeix marge de 20 píxels dalt i a baix i 0 als costats */
    background-color: white; /* Posa fons blanc a la taula */
	font-family: calibri, sans-serif; 
}

/* Títol de la taula */
caption {
	font-family: calibri, sans-serif;
    margin-bottom: 10px; /*Espai de 10 píxels per separar el títol de la taula */
    color: grey; /*Color gris per al text del títol */
    font-size: 32px; /*Mida de lletra gran de 32 píxels per al títol */
}

/* Capçalera de la taula */
th {
	font-family: calibri, sans-serif;
    background-color: pink; /*Canvia el fons de les cel·les superiors de la taula a rosa */
    color: black; /*Pinta el text de la capçalera de color negre */
    padding: 10px;/*Espaiat intern de 10 píxels a les cel·les superiors */
    text-align: center; /*Centra el text dins de les capçaleres de la taula */
}
td {
    padding: 12px 15px; /* Marge de 12 píxels dalt i a baix i 15 píxels als costats */
    color: grey; /*Pinta el text de les dades de la taula de color gris */
	text-align: center; /*Centra el text dins de cada cel·la de dades */
}
/* FORMULARIS */
input, textarea {
    font-family: calibri, sans-serif; /* Tipografia calibri */
    font-size: 16px; /* Defineix la mida de la lletra de l'usuari en 16 píxels */
    color: grey; /*Fa que el text que s'escriu sigui de color gris */
}