@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
main{
    background-color: #1D2D30;
    padding-top: 15px;
    color: white;
    min-height: 90vh;
}
.headerIndex{
    background-color: #152026;
    display: flex;
    justify-content:space-between ;
    height: 75px;
}
header{
    background-color: #152026;
    display: flex;
    height: 75px;
    width: 100%;
}
.ImageHeader{
    height: 75px;
}
footer{
    background-color: #152026;
    color: white;
    display: flex;
    align-items: center;
}
body {
    margin: 0px;
    font-family: "Montserrat", sans-serif;
}
.GrosTitre{
    display: flex;
    text-align: center;
	color: transparent;
	background-image: linear-gradient(60deg, #31CCBA, #C18F4E);
	background-clip: text;
    /*pour le dégradé : https://www.gerits-aurelien.be/fr/pages/11-creer-un-texte-en-degrade-avec-css/ */
}
.un{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.GrosBouton{
    border-radius: 67px;
    background-color: #148B8C;
    border: none;
    width: 250px;
    height: 25px;
    transition-duration:0.3s ;
}
.GrosBouton:hover{
    transform: scale(1.15);
}
.texte1{
    margin-left: 20px;
}
.IndexArtiste{
    background-color: #194E4E;
    width: 250px;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition-duration: 0.3s;
}
.IndexArtiste:hover{
    transform: scale(1.05);
    box-shadow: 5px 5px 20px rgb(26, 26, 26);
}
.ArtistePhoto{
    width: 100%;
    border-radius: 25px 25px 0px 0px;
}
.ImageIndex{
    display: flex;
    justify-content:space-around;
}
.CrééCompte{
    display: flex;
    justify-content: center;
}
.Compte{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.Bouton2{
    margin: 75px;
}
.BoutonConnexion{
    margin: 25px;
}
.ConnexionExterieur{
    display: flex;
    align-items: center;
    justify-content: center;
}
.pub{
    width: 66%;
    display: flex;
    justify-content: space-around;
}
.LogoFooter{
    width: 50px;
    height: auto;
}
.credit{
    display: flex;
    justify-content: end;
    align-items: center;
}
.imgAcceuil{
    width: 175px;
    border-radius: 20px;
}
nav{
    background-color: #152026; 
    margin: 15px; 
    border-radius: 15px;
}
.IconeNav{
    width: 54px;
    height: 54px;
    padding: 10px;
}
.EcouteRecement{
    display: flex;
    justify-content: space-around;
}
.ArtisteGroupe{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 75px;
    padding-right: 75px;
    padding-top: 30px;
    padding-bottom: 30px;
    transition-duration: 0.3s;
}
.ArtisteGroupe:hover{
    transform: scale(1.1);
}
.TextTitre{
    padding: 10px;
}
.propositionPerso{
    display: flex;
    justify-content: space-around;    
}
.PrefAmis{
    display: flex;
    justify-content: space-around;   
}
.com{
    padding: 20px;
    background-color: #152026; 
    margin: 20px;
    border-radius: 25px;
}
.MusiqueCom{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ppMJ{
    width: 40px;
    height: 40px;
    border-radius: 70px;
    padding-right: 15px;
}
.comComplet{
    display: flex;
    align-items: center;
    border-radius: 15px;
    padding-left: 5px;
    transition-duration: 0.1s;
}
.comComplet:hover{
    background-color:#36464f;
}
.ComSansImg{
    display: flex;
    flex-direction: column;
    font-size: 10px;
}
.Accueil{
    display: flex;
    justify-content: space-between;
}
.IconeSonJoué{
    display: flex;
}
.Elton{
    width: 50px;
    height: 50px;
    padding-top: 19px;
    padding-left: 10px;
    padding-right: 10px;
}
.MusiqueJoué{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #152026;
    border-radius: 5px;
}
.barreDécoute{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.BarreSon{
    padding-right:10px ;
}
.Profil{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.abonnements{
    display:flex ;
    flex-direction: column;
    align-items: center;
    padding: 30px;
}
.abonnés{
    display:flex ;
    flex-direction: column;
    align-items: center;
    padding: 30px;
}
.Abo{
    display: flex;
    justify-content: center;
    align-items: center;
}
.hr{
    margin: 0%;
    height: 50px;
}
.RécementEcouté{
    display: flex;
    justify-content: space-around;
}
.ArtisteRecent{
    transition-duration: 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ArtisteRecent:hover{
    transform: scale(1.1);
}
input{
    outline: none;
    border-radius: 66px;
}
.InscriptionConnexion{
    background-image: url('img/luxa.org-opacity-changed-._justeLeLogo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
    padding: 250px;
    display: flex;
    justify-content: center;
    position: relative;
}
.BtnInsriptionConnexion{
    text-decoration: none;
    color: rgb(195, 195, 195);
    background-color: rgb(35, 39, 43);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 5px;
    transition-duration:0.2s ;
    display: inline-block;
}
.BtnInsriptionConnexion:hover{
    transform: scale(1.05);
}
.form{
    display: flex;
    flex-direction: column;
    align-items: end;
}
.DejaCompte{
    font-size: 13px;
    color: rgb(171, 171, 171);
}
.ElementForm{
    padding: 5px;
}
.Donald{
    display:flex ;
    flex-direction: column;
}
.ChangerNom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px;
}
.DisplayFlex{
    display:flex;
}
.bareDeRechercheP{
    margin: 0 auto;
    display: flex;
    align-items: center;
}
.EmailMDP{
    display: flex;
    justify-content: space-between;
    margin: 20px;
}
.InputEmailMDP{
    display: flex;
    flex-direction: column;
}
.ThemeSombre{
    margin-left:20px ;
}
.Notif{
    margin-left: 20px;
}
.Langue{
    display: flex;
    margin-left: 20px;
    margin-top: 45px;
}
.LangueRouleau{
    margin-left:20px ;
    border-radius: 5px;
}
.TitreAmis{
    text-decoration: underline;
    margin-left: 20px;
}
.AmisTop{
    display: flex;
    justify-content: space-between;
}
.ajouterAmis{
    display: flex;
    align-items: center;
    margin-right: 20px;
}
.LogoAjouterAmis{
    width: 35px;
    margin-right: 10px;
}
.ListeAmis{
    display: flex;
    justify-content: space-between;
    margin-left: 20px;
    margin-right: 20px;
}
.CardsPart1{
    display: flex;
    justify-content: space-evenly;
}
.CardsPart2{
    display:flex ;
    justify-content: space-evenly;
    padding-bottom: 35px;
}
.CardsSansBoss{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.Card{
    background-color: #194E4E;
    border-radius: 25px;
    padding: 25px;
    margin-top: 35px;
    transition-duration: 0.4s;
}
.Card:hover{
    transform: scale(1.15);
    box-shadow: 5px 5px 20px rgb(26, 26, 26);
}
.BossCard{
    width: 55px;
}
.MainNotif{
    opacity: 30%;
}
.BodyNtif{
    background-color: #1D2D30;
}
.pop-ups{
    background-color: white;
    display:flex;
    flex-direction: column;
    align-items: start;
    width: min-content;
    height: min-content;
    border-radius: 25px;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 20px;
    margin-right: 20px;

}
.VladKim{
    display: flex;
}
.colone{
    display:flex ;
    flex-direction: column;
}
.finPage{
    display: flex;
    justify-content: end;
}
.HeaderNotif{
    opacity: 30%;
}
.HrNotif{
    width: 350px;
}
.LouiseAttaque{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 45px;
}
.TitreEcoute{
    margin-left: 20px;
    text-decoration: underline;
}
.EnEcoute{
    display: flex;
    justify-content: space-around;
    border-radius: 10000px;
}
.ActionEcoute{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #152026;
    width: min-content;
    border-radius: 15px;
}
.BarreAction{
    display: flex;
    justify-content: center;
    margin-top: 25px;
    margin-bottom: 25px;
}
.Action1{
    margin-left: 45px;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 7.5px;
}
.Action2{
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 7.5px;
    margin-right: 7.5px;
}
.Action3{
    margin-right: 45px;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 7.5px;
}
.Retour{
    margin-left: 10px;
}
.ImgAmisDiscution{
    width: 50px;
    height: 50px;
}
.AmisDiscution{
    display: flex;
    margin-left: 15%;
}
.top{
    display: flex;
}
.AmisPasDiscution{
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    margin-top: 5%;
    width: min-content;
    padding-right: 50px;
    border-right: 1px solid white;
}
.ArtAmisPasDiscution{
    display: flex;
    margin-bottom: 32.5px;
}
.MessageUn{
    padding-right: 330px;
    background-color:#194E4E;
    padding-left: 5px;
    border-radius: 5px;
    width: max-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 20px;
    margin-top: 80px;
    margin-bottom: 35px;
}
.MonMessage{
    padding-left: 330px;
    width: max-content;
    background-color:#194E4E;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    height: 20px;
    border-radius: 5px;
    padding-right: 5px;
    margin-bottom: 35px;
}
.MessageSeul{
    padding-right: 330px;
    background-color:#194E4E;
    padding-left: 5px;
    border-radius: 5px;
    width: max-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 20px;
    margin-bottom: 35px;
}
.ZoneMessage{
    width: 1000px;
    display: flex;
    flex-direction: column;
    margin-left: 5%;
}
.Messagerie{
    display: flex;
}
.FinPage{
    display: flex;
    justify-content: end;
}
.EnvoyerMessage{
    width: 50%;
}