/* style de la page */

body.style-page {
  background: #000; /* fond noir */
  color: #fff; /* texte blanc */
  font-family: Arial; /* police Arial */
}

/* titres */

main.text-haut h2 {
  letter-spacing: 3px; /* espaces entre les lettres */
  font-size: 35px; /* taille du text */
  text-align: center; /* text centré au centre */
}

/* barre de menu en haut */

header.barre-menu-haut {
  display: flex;   /* dispotition en flex */
  justify-content: space-between; /* espacé entre les plusieurs éléments */
  align-items: center; /* aligné les items au centre */
  padding: 24px 48px; /*  */
}

header.barre-menu-haut h1 {
  font-size: 30px;
  letter-spacing: 2px; /* espace entre les lettres */
}

nav.barre-menu-haut a {
  display: inline-block; /* disotition en inline-block */
  padding: 12px 15px;
  border-radius: 10px; /* faire des coins rond*/
  background: #111;
  color: #fff;
  text-decoration: none; /* enlevé le traits du liens */
  border: 1px solid #333; /* bordures */
  font-size: 16px;
  margin-left: 20px; /* faire une marge a gauche */
}

nav.barre-menu-haut a:hover {
  transition: 0.3s; /* permet de faire une transition de #s */
  background: #333;
  transform: scale(1.05); /* augmenté la taille */
  box-shadow: 0 0 10px white; /* faire un effet blanc */
}


/* copyright */

footer.copyright {
  text-align: center;
  padding: 5px;
  color: #888;
  font-size: 15px;
  position: fixed; /* position fixe */
  bottom: 0; /* permet qu'il reste tout en bas de la page*/
  width: 100%; /* largeur */
  background: #000;
  margin-top: 40px; /* faire une marge au dessus*/
}

/* accueil */


main.accueil {
font-size: 20px;
  text-align: center;
  padding: 220px;
}

main.accueil h2 {
  letter-spacing: 3px;
  font-size: 48px;
  margin-bottom: 8px; /* marge en bas */
}


/* à propos */ 


.a-propos-flex {
  display: flex;
  gap: 100px;
  word-wrap: break-word; /* permet de ne pas casser les mots en changement de ligne */
  margin-right: 5%; /* marge a droite */
  align-items: center;
  line-height: 35px; /* espace entre les lignes */
}

.a-propos-flex2 {
  display: flex;
  word-wrap: break-word;
  margin-left: 15%;
  margin-top: 1%;
  align-items: center;
  line-height: 30px; /* espace entre les lignes */
}

.image {
    width: 400px;
    height: 260px; 
    margin-left: 100px;
    margin-top: 20px;
    border-radius: 10px;
}

.image2 {
    width: 15%; /* largeur */
    height: 15%px; /* hauteur */
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10px;
    border-radius: 10px;
    align-self: flex-end; /* alignement en flex-end */
}


/* liste-des-personnages */ 

.image5 {
    width: 390px;
    height: 440px;
    border-radius: 10px;
}

.image6 {
    width: 390px;
    height: 440px;
    border-radius: 10px;
}

.image7 {
    width: 390px;
    height: 440px;
    border-radius: 10px;
}

.image-liste {
  display: flex;
  justify-content: space-evenly;
}

.image-liste :hover {
  transition: 0.3s;
  background: #333;
  transform: scale(1.05);
  box-shadow: 0 0 10px white;
}

.text-liste {
  margin-top: 0.5%;
  display: flex;
  justify-content: space-evenly;
}

.text1-list {
  margin-right: 7%;
}


.text3-list {
  margin-left: 7%;
}

/* Personnages */ 

.personnage-container { 
  display: flex;
  justify-content: space-evenly;
  gap: 20px;
  word-wrap: break-word;
}

.tableau-perso {
    margin-left: 5%;
    margin-top: 25px;
    width: 80%;
    height: 475px;
    border: 2px solid white; /* Bordure extérieure */
    color: white;
    background-color: #131313;
    text-align: left;
    border-radius: 10px;
}

.tableau-text-gauche {
  padding-left: 50px;
}

.personnage-text {
  margin-top: 26px;
  margin-left: 3%;
  margin-right: 6%;
  line-height: 25px; /* espace entre les lignes */
}

/* Steve jobs */ 

.stevejobs-image {
  width: 25.5%;
  height: 15%;
  margin-left: 7%;
  margin-top: 20px;
  border-radius: 10px;
}


/* Linus-Torvalds*/ 

.LinusTorvalds-image {
  width: 390px;
  height: 488px;
  margin-left: 11%;
  margin-top: 20px;
  border-radius: 10px;
}

/* Tim-Berners-Lee */ 

.Tim-berners-lee-image {
  width: 70%;
  height: 485px;
  margin-left: 8%;
  margin-top: 20px;
  border-radius: 10px;
}