/* BODY */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: black;
    color: #fff;
}

/* NAV    */

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e0e0e0;
    padding: 10px;
}

.logo-img {
    width: 300px;
}

.LogoCliquable{
    background: transparent;
}

a {
    padding: 10px 20px;
    background-color: black;
    color: aliceblue;
    text-decoration: none;
}

a:hover {
  /* une transition de 100ms pour être smooth*/
  transition: 100ms;
  /* Agrandit de 8% */
  transform: scale(1.08);
}

h3 {
    margin: 0;
    color: #000000;
}

/* MAIN */
h1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.TexteDeBase{
    margin-left: 20px;
    color: #fff;
}

.SystemeSolaire img{
    width: 100%;
    height: 30%;
    
}

h2{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.CouleurTexte{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
font-size: 20px;
}

/* les couleurs */ 
.jaune{
color: yellow;
}

.orange{
color: orange;
}

.bleu{
color: blue;
}

.rouge{
color: red;
}

.brun{
color: brown;
}

.peche{
color: burlywood;
}

.cyan{
color: aqua;
}

.bleu{
color: blue;
}

/* le lien YT */
.LienYT{
    margin-top: 2%;
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

iframe{
    width: 70%;
    height: 600px;
}

/* Texte sur le système solaire*/
.AprèsSystèmeSolaire{
    margin-left: 20px;
    font-size: 25px;
}

/* Le bloc VoieLactée */

/* Couleur des côtés du tab*/
table{
    border: 3px solid #fff;
    padding: 2px;
}
 /* Bordures internes */
td, tr {
    border: 3px solid #fff;
    padding: 20px;
  }

.VoieLactéeLien{
    display: flex;
    flex-direction: column;
    align-items: center;
}   

.VoieLactée{
display: flex;
flex-direction: row;
align-items: center;
}

.VoieLactée img{
    width: 30%;
    height: 50%;
}

.VoieLactée table{
margin-left: 10%;
}
    
/* Le bloc Sagittarius */

.SagittariusLien{
    display: flex;
    flex-direction: column;
    align-items: center;
}   

.Sagittarius{
display: flex;
flex-direction: row;
align-items: center;
}

.Sagittarius img{
    width: 50%;
    height: 40%;
}

.Sagittarius table{
margin-left: 10%;
}

/*Le texte Sommes-nous seuls dans l’Univers ? */


/* Pour enlever le background */
.seulsUnivers a{
background-color: transparent;
display: flex;
justify-content: center;
}

/* Pour avoir l'image à gauche et le texte à droite*/

/* Pour Bacterie */
.Bacterie{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 5%;
}

.Bacterie h2{
    margin-left: 10%;
}

.Bacterie img{
    width: 30%;
    height: 50%;
    margin-top: 3%;
    margin-right: 20%;
}

/* Pour James Webb */
.JamesWebb{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 5%;
    }
    
    .JamesWebb h2{
        margin-left: 10%;
    }
    
    .JamesWebb img{
        width: 30%;
        height: 50%;
        margin-top: 3%;
        margin-right: 20%;
    }

    /* Pour K2-18b */
    .K2-18b{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 5%;
        }
        
        .K2-18b h2{
            margin-left: 10%;
        }
        
        .K2-18b img{
            width: 30%;
            height: 50%;
            margin-top: 3%;
            margin-right: 20%;
        }

.Définition h3{
color: #fff;
}

/* Footer */
footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e0e0e0;
    padding: 10px 20px;
    color: black;
    font-family: Arial, sans-serif;
}