/* CSS file for Aisha's website */

body {
	background-color: black;
	margin-right: 2%;
	margin-left: 2%;
	font-family: Garamond;
	color: white;
}

a {
	font-family: Garamond;
	color: white;
}

p {
	width: 100%;
	padding: 0.5%;
	margin: 0.5%;
}

.generic {
  width: 70%;
  display: flex; /* Utilise flexbox pour l'alignement */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement si nécessaire */
  display: block; 
  margin: 0 auto;}

.centered {
  width: 60%;

   /* Center horizontaly and vertically*/
  display: flex; 
  justify-content: center; 
  align-items: center; 

  display: block; 
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;}

/* image1 is for the main image on the page */
.image1 {
  width: 60%;
  
   /* Center horizontaly and vertically*/
  display: flex; /
  justify-content: center; 
  align-items: center;

  display: block; 
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;}


footer {
  margin-top: 100px;
  width: 60%;
  justify-content: center; 
  align-items: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* ----------------------------  */
/* --- description homepage  --- */
/* ----------------------------  */

#homepage {
display: grid;
grid-template-columns: 2fr 3fr ;
margin: 0 auto;
width: 60%;
}


.portraitpicture {
  text-align: right; 
  display: flex; 
  justify-content: flex-end; 
  padding: 10px; 
}

.description {

  overflow-wrap: break-word;
  text-overflow: ellipsis;
  padding: 10px;
}

.image2 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: 100%;
  height: auto;
}

/* ----------------------------  */
/* --- Navigation bar on top --- */
/* ----------------------------  */

/* Add a black background color to the top navigation */
.topnav {
    /* background-color: #333; */
  overflow: hidden;
  white-space: nowrap;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  text-align: center;
  padding: 5px 1px;
  margin: 0 5px;
  text-decoration: none;
  font-size: 1.8em;
}

/* Change the color of links on hover */
.topnav a.split:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link
.topnav a.active {
  background-color: #04AA6D;
  color: white;
} */

/* Create a right-aligned (split) link inside the navigation bar */
.topnav a.split {
  float: right;
  font-size: 1em;
}