html{font-size: 20px;} /*fixe la taille de base  de la police dans la page*/

header{ 
	background-color: #66B4E8; /*couleur de l'arrière plan du header*/
	text-align: center; /*le texte dans le header s'aligne au centre*/
	border-radius: 20px 10px; /*cela arrondi les bords, deux arrondis différents*/
	color: #002baa; /*couleur du texte dans le header*/
	font-weight: bold; /*l'intensité de couleur du texte*/
	margin-left:20px; /*marge à gauche*/
	margin-right: 20px; /*marge à droite*/
}

/*exactement la même chose que le header*/
footer{ 
	background-color: #66B4E8;
	text-align: center;
	border-radius: 20px 10px;
	color: #002baa;
	font-weight: bold;
	margin-left:20px;
	margin-right: 20px;
}

.container {
	display : grid; /*je crééer une grille*/
	grid-template-rows: 1fr 3fr 1fr; /*je défini les taille de base des parties de ma grille*/
	gap: 20px; /*espace entre tout les modules de la grille*/
	height: 95vh; /*cette grille doit occuper 95% de l'écran, se qui laisse une petite marge*/
	grid-template-areas: "header header header"
						 "sidebar content content"
						 "footer footer footer"; /*je nomme les modules de ma grille pour les attribuer ensuite*/
}

.item1 {
    grid-area: header; /*je donne une classe a mon header pour pouvoir l'utiliser dans mon code html et l'appeler*/
}

.item3 {
    grid-area: content; /*la même chose que pour le header*/
	font-size: 25px; /*je défini la taille de base du texte pour cet item*/
    background-color: #A0C0E9; /*je choisi une couleur d'arrière plan*/
    font-weight: bold;
    border-radius: 10px; /*cela arrondi les bords*/
    padding: 20px; /*j'ajoute un espace dans les bord intérieur de mon content*/
    box-shadow: 6px 6px 0px rgb(0, 0, 0); /*je donne un effets d'ombre sur les bord de mon item*/
    margin-right: 20px; /*je donne une marge à droite*/
}

/*la même chose que pour le content (item 3)*/
.item2 {
    grid-area: sidebar;
    background-color: #A0C0E9;
    font-weight: bold;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 6px 6px 0px rgb(0, 0, 0);
    margin-left:20px;
}

.item4 {
    grid-area: footer; /*je donne une classe à mon footer*/
}