html,body{
	/*Retirer toutes les marges pour que 
	les éléments soient tout en haut de la page*/ 
    margin: 0;
	padding: 0;
    height: 100%;
	/*Changer la couleur du fond*/
	background-color : #004aad;
}
header {
	height:40px;
}

header nav{ 
	vertical-align: top;
	display:inline-block;
	height:100%;
}

header nav ul{
	/*Retirer les marges aux éléments de la liste*/
	margin:0;
	padding:0;
	list-style-type:none;
	height:100%;
}

header nav ul li{
	/*Disposer les éléments de la liste en ligne, au centre de leur case respective*/
	display:inline-block;
	margin:0;
	height:100%;
	width:150px;
	text-align:center;
}

header nav ul li a{
	/*Disposer les éléments de la liste en ligne, au centre de leur case respective.
	Suppression du surlignage*/
	display:block;
	width:100%;
	height:100%;
	line-height:40px;
	font-size: 17px;
	color:white;
	text-decoration:none;
}

header nav ul li a:hover{
	/*Changer la couleur du fond une fois la souris passée sur l'un de ses éléments*/
	background-color:rgba(76, 0, 130, 0.308);
}

main {
	/*Organiser les différents blocs en colonne, 
	changer leur police d'écriture*/
	font-family: 'Times New Roman', Times, serif;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

main p {
	font-size: 25px;
}

main ul {
	font-size: 25px;
}

#Profile img {/*Conteneur des informations personnelles*/
	/*modifier les dimensions de l'image,
	incliner ses bordures*/
	border-radius: 15px;
	width: 7%;
	/*Affiche l'image comme un bloc*/
	display: block; 
	/*Centrer la position de l'image*/
  	margin-left: auto;
  	margin-right: auto;
}

#Profile ul{
	list-style-type: none;
	text-align: center;
	margin-right: 32px;
	color: white;
	font-size: 25px;
}

#Profile p{
	font-size: 22px;
	color: white;
	text-align: center;
}

#Education{/*Conteneur principal des matières de la formation*/
	/*Création d'un premier conteneur,
	dans lequel les éléments y seront centrés*/
	display: flex;
	justify-content: center;
	border-style: outset;
	/*Epaississement, changement de couleur et arrondissement des bordures*/
	border-width: 3px;
	border-color: gray;
	border-radius: 10px;
	background: linear-gradient(#445cd6,#3a60e4,#445ccc,#4060d8);
}

#Education h1{
	text-align: center;
	font-size: 30px;
	color: white;
}

.box-container {
	/*Création d'un deuxième conteneur,
	dans lequel des boutons sont disposés en colonne*/
	display: flex;
	flex-direction: column;
	/*Centrer horizontalement*/
	align-items: center; 
	/* Centrer verticalement */
	justify-content: center; 
	/*Espacer les boutons entre-eux*/
	gap: 15px;
	font-family: Arial, sans-serif;
}
  
.box {
	background-color: indigo;
	color: white;
	width: 20%;
	padding: 10px;
	border-radius: 5px;
	/*Changer l'icône du curseur sur les boutons,
	indiquant la cliquabilité*/ 
	cursor: pointer;
	transition: background-color 0.3s ease;
	/* Centrer le texte à l'intérieur des cases */
	text-align: center; 
	margin: 5px;
}

.box:hover {
	background-color: darkblue;
}

.hidden-text { /* Texte caché par défaut */
	width: 75%;
	/*Cacher le texte*/
	display: none; 
	/*Le positionner en dessous légèrement en dessous de chaque bouton*/
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 20px;
	padding: 10px;
	/*Changer la couleur du fond sur lequel apparaitra le texte*/
	background-color: #f9f9f94e;
	border: 1px solid #ddd;
	border-radius: 5px;
	/* Centrer le texte à l'intérieur */
	text-align: center; 
}

#Skills{/*Conteneur des compétences actuelles*/
	font-family: 'Times New Roman', Times, serif;
}

#Skills h2{
	font-size: 25px;
}

#Skills ul{
	list-style-type: none;
}

#Skills ul li{
	color: #333;
	margin: 10px;
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*Section réservée aux travaux personnelles*/ 

#PC{/*Conteneur des créations personnelles*/
	/*Organisation des différentes rubriques de la page*/
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	border-style: outset;
	border-width: 3px;
	border: 5px solid #ddd;
	border-radius: 10px;
	background: linear-gradient(#445cd6,#3a60e4,#445ccc,#4060d8);
}

#PC h1{
	/* Centrage du titre du bloc principal */
	text-align: center;
}

#GA{/*Conteneur destiné aux travaux graphiques*/
	text-align: center;
	border-style: outset;
	border-width: 3px;
	border-radius: 10px;
	background: linear-gradient(#445cd6,#3a60e4,#445ccc,#4060d8);
	/*Agrandissement du bloc pour forcer un retour à la ligne des autres*/
	width: 3500px; 
}

#Aua{/*Conteneur destiné aux travaux vidéos*/
	text-align: center;
	border-style: outset;
	border-width: 3px;
	border-color : gray;
	border-radius: 10px;
	background: linear-gradient(#445cd6,#3a60e4,#445ccc,#4060d8);
	/*Agrandissement du bloc pour forcer un retour à la ligne des autres*/
	width: 3500px;
}

#Code{/*Conteneur destiné aux programmes informatiques*/
	text-align: center;
	border-style: outset;
	border-width: 3px;
	border-color: gray;
	border-radius: 10px;
	background: linear-gradient(#445cd6,#3a60e4,#445ccc,#4060d8);
	/*Agrandissement du bloc pour forcer un retour à la ligne des autres*/
	width: 3500px;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*Section réservée au formulaire de contact*/

#contact h1{
	color: white;
}


form{ 
	text-align: center;
	font-size: 25px;
	color : White;
	border-radius: 45px;
	background: linear-gradient(#445cd6,#3a60e4,#445ccc,#4060d8);
}

input[type=text]{ /*Appliquer à tous les inputs de type "text"*/
	/*Agrandir les lignes de saisie*/
	width: 50%;
	padding: 12px 20px;
	/*Les séparer entre elles*/
	margin: 8px 0;
	display: inline-block;
	/*Rendre les bordures moins visibles et les arrondir légèrement*/
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}
  
textarea{ /*Appliquer à la zone de texte réservée aux commentaires*/
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;	
}
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*Modifier les éléments restants n'ayant pas encore été affectés,si nécessaire*/

h1,h2,p{ 
	font-family: 'Times New Roman', Times, serif;
	text-align: center;
}

h2{
	font-size: 25px;
}