body{
    margin: 0;
}

nav{
    display: flex;
    flex-direction: row-reverse;
    font-family:"inter", sans-serif;
}
.nav a{
    color: rgb(255, 255, 255);
    text-decoration: none;
    padding: 30px;
}

.h{
    font-family: "Climate Crisis", sans-serif;
}
.h__1{
    font-size: 142px;
    margin: 142px 60px 142px 0px ;
}
.h__2{
    font-size: 60px;
    padding: 0px 60px 60px 0;
    margin: 0;
}
.h__3{
    font-size: 29px;
    padding: 29px 0px 29px 0px;
}

p{
    font-family: "inter", sans-serif;
    line-height: 140%;
    font-size: 22px;
    max-width: 70ch;
}
.text__size{
    font-size: 29px;
    font-weight: bold;
}

section{
    padding: 60px;
}
.section__background{
    background-color: #0C0C16;
    color: rgb(255, 255, 255);
}
.section__background--PAccueil{
    background: radial-gradient(at 0% 30%, #0C0C16, 82%, #6666FF);
    color: rgb(255, 255, 255);
    height: 100%;
    padding: 20px 60px;
}

img{
    border-radius: 8px;
    margin: 0 20% 0 20%;
}

.contenu__centre{
    margin: 0px 25% 0px 25%;
}
.contenu__alterne{
    display: flex;
    justify-content: space-around;
    margin-bottom:0px ;
}
.contenu__alterne img{
    margin: 0 0 0px 29px;
}
.contenu__alterne--inverse{
    justify-content: flex-end;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin-top: 60px;
}
.contenu__alterne--inverse img{
    margin: 0 29px 0px 0;
}

footer{
    background-color:  #0C0C16;
    color: white;
    padding: 60px;
    display: flex;
    justify-content:center ;
    margin: 44px 0 0 0 
}

footer a{
    color: white;
    text-decoration: none;
}

.legende{
    display: flex;
    font-family: "inter", sans-serif;
}
.legende__gauche{
    display: block;
}
.legende__droite{
    justify-content: flex-end;
}
.legende__centre{
    margin-left: 20%;
}



@media (max-width: 700px){

    p{
        font-size: 16px;
        max-width: 55ch;
    }

    .h__1{
    font-size: 103px;
    margin: 103px 21px 103px 0px ;
    }
    .h__2{
        font-size: 44px;
        padding: 44px 21px 44px 0;
        margin: 0;
    }
    .h__3{
        font-size: 21px;
        padding: 21px 21px 21px 0px;
    }

    section{
    padding: 44px 21px 44px 21px;
    }
    .section__background{
        background-color: #0C0C16;
        color: rgb(255, 255, 255);
    }
    .section__background--PAccueil{
        background: radial-gradient(at 0% 30%, #0C0C16, 82%, #6666FF);
        color: rgb(255, 255, 255);
        height: 100%;
        padding: 44px 21px;
    }

    .contenu__centre{
    margin: 0px 10% 0px 10%;
    }


    .contenu__alterne{
        display: flex;
        flex-direction: column;
        justify-content: space-around;

    }
    .contenu__alterne img{
        margin: 0;
    }
    .contenu__alterne--inverse{
        justify-content: flex-end;
        justify-content: space-between;
        flex-direction: column;
        margin-top: 44px;
    }
    .contenu__alterne--inverse img{
        margin: 0;
    }
    img{
        margin: 0 10% 0 10%;
    }
    figure{
        margin:14px 10% 14px 10% ;
        font-size: 14px;
    }
}


/*page crédits*/
.crédits a{
 text-decoration: none;
 font-family: "inter", sans-serif;

}
.crédits ul{
    list-style: none;
    padding: 0;
}
.h__1--crédits{
    font-size: 60px;
}
.h__2--credits{
    font-size: 29px;
}