@import url('https://fonts.googleapis.com/css2?family=Tomorrow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*Pour choisir coté du Border Radius : https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/border-radius#propri%C3%A9t%C3%A9s_d%C3%A9taill%C3%A9es_correspondantes */
/*https://www.youtube.com/watch?v=ej6tATXyJ_M Pour scroll overflow*/
header {
    background-color: #1E021F;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

header img {
    border-bottom-left-radius: 25px;
    height: 150px;
}
body {
    font-family: "Tomorrow", sans-serif;
    margin: 0%;
    background-color: #612C78;
    color: white;
}
div {
    display: flex;
    flex-direction: column;
    text-align: center;
}
a {
    text-decoration: none;
    color: black;
}
.bouton {
    background-color: #D5C8E3;
    width: 600px;
    margin: auto;
    border-radius: 100px;
    padding: 10px;
}
.cards {
    display: flex;
    flex-direction: column;
    color: black;
    margin: auto;
    align-items: center;
    border-radius: 50px;

}
section {
    display: flex;
    padding-top: 25px;
}
.cards img {
    width: 400px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;

}
.jaune {
    background-color: #FFFAA1;
}
.orange {
    background-color: #D7893A;
}
.bleu{
    background-color: #76E0F3;
}
.indexDPS {
    display: flex;
    flex-direction: column;
    padding: 1%;
}
.indexDPS img {
    width: 1200px;
    margin: auto;
    border-radius: 25px;
}
footer {
    background-color: #1E021F;
    display: flex;
    justify-content: center;
    
}
.connexion {
    opacity: 50%;
}
input {
    padding: 25px;
    border-radius: 100px;
    font-size: 200%;
    margin: 10px;
    border: none;
}
    
.formulaire img {
    margin: auto;
    
}
main h1 {
    display: flex;
    margin: auto;
}
.settingbouton {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.bouswitch {
    display: flex;
    flex-direction: column;
    gap: 35px;
    margin-top: 20px;
    margin-left: 50px;
}
.boumodif {
    display: flex;
    flex-direction: column;
    gap: 75px;
    margin-top: 75px;
    margin-left: 50px;
}
.settingtext {
    font-size: 50px;
}
main h1 {
    font-size: 75px;
}
.settingbouton img {
   width: 150px;
}
.indexDPdess {
    display: flex;
    flex-direction: column;
    padding: 1%;
}
.indexDPdess img {
    width: 700px;
    margin: auto;
    border-radius: 125px;
}
.profil {
    display: flex;
    justify-content: space-between;
}
.vertical {
    rotate: 90deg;
    justify-content: center;
}
.milieu {
    display: flex;
    margin: auto;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}
.milieu img {
    width: 250px;
}
.gauche {
    display: flex;
    align-items: end;
    margin-top: -200px;
}
.abonnements {
    display:flex ;
    flex-direction: row;
    padding: 30px;
    margin-left: 750px;
    text-align: right;
}
.Abonnés {
    display:flex ;
    flex-direction: row;
    padding: 30px;
    margin-right: 770px;
}
.Profabo {
    display: flex;
    align-items: center;
}
.long {
    width: 500px;
    margin-top: -300px;
}
.amisrech {
    display: flex;
    align-items: center;
    gap: 10px;
}
.Demande {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #B667D8;
    width: 310px;
    border-radius: 20px;
    padding-left: 5px;
    margin-left: 25px;
    margin-top: 25px;
    opacity: 1;
}
.amis {
    display: flex;
    justify-content: space-between;
    padding: 50px;
}
.amisco {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.amico { 
    display: flex;
    flex-direction: row;
}
.amicoprof {
    display: flex;
}
.amicobouton {
    display: flex;
    flex-direction: row;
}
.amicobouton img {
    width: 75px;
    height: 75px;
}
.feedisplayer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.feedfirst {
    display: flex;
    flex-direction: column;
}
.feedsecond {
    flex-direction: column;
}
.Everpost {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 10px;
}
.reply {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.post {
    display: flex;
    flex-direction: column;
    margin: auto;
    background-color: #B667D8;
    padding: 10px;
    border-radius: 50px;
}
.HC {
    display: flex;
    justify-content: space-around;
    padding: 10px;
}
.HC img {
    transition: ease-out 0.5s;
    transform: scale(100%);
}
.HC :hover {
    transition: ease 0.5s;
    transform: scale(105%);
}
.opac {
    opacity: 0.5;
}
.messageur {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #B667D8;
    width: 300px;
    border-radius: 20px;
    padding: 10px;
    margin: 15px;
    border: 1px solid black;
}
.MP {
    flex-direction: column;
    width: 30%;
}
.messagerie {
    flex-direction: column;
    width: 60%;
    height: 725px;
    overflow: auto;
}
.discuteur {
    display: flex;
    align-items: center;
}
.discuteur p {
    font-size: small;
    opacity: 70%;
}
.emmeteur {
    justify-content: end;
}
.message {
    display: flex;
}
.mauve {
    background-color:#D5C8E3;
    margin: 10px;
    width: 50%;
    color: black;
    border-radius: 10px;
}
.Nwar {
    background-color: #1E021F;
    margin: 10px;
    width: 50%;
    color: white;
    border-radius: 10px;
}
.Truc {
    display: flex;
    flex-direction: row-reverse;
}
.displayeur {
    display: flex;
    justify-content: space-around;
}