/* importation de la police 'Poppins' de Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;500;600;700;900&display=swap');

html{
   display: flex;
   flex-direction: column;
   align-items: center;
   font-family: "Cinzel", serif;
   font-optical-sizing: auto;
   font-weight: <weight>;
   font-style: normal;
   font-weight: 800;
   gap: 80px;
   width: 100%;
   height: 100%;
   margin: 0;
}

body {
   background-color: #fffad8;
   color: #333;
   width: 100%;
   margin: 0;

}

/* En-tête */

#logo{
   height: 150px;
   width: 150px;
   margin: 0;
   padding: 0;
}

nav{
   display: flex;
   justify-content: center;
   background-color: #ffcbf1;
   box-shadow: 10px 10px 15px #30004a4d;
   justify-content: space-between;
}

.navbarre{
   display: flex;
   flex-direction: row;
   align-items: center;
   list-style: none;
   margin: O;
   padding: 20px;
   gap: 5px;
}

.navbarre h2{
   font-family: "Lora", serif;
font-size: 25px;
font-weight: bold;
}

.navbarre .link{
   text-align: center;
   text-decoration: none;
   list-style: none;
   font-size: 25px;
   color: #333;
   
}

.link{
   color: black;
   text-decoration: none;
   transition: all .3s ease-in-out;
   padding: 5px;
}

.link:hover{
   display: flex;
   color: #8005F2;
   background-color: #bb79f84b;
   border-radius: 10%;
   transition: all .3s ease-in-out;
}

.button{
   width: fit-content;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 8px 16px;
   border-radius: 8px;
   border: solid 2.5px #8005F2;
   text-decoration: none;
   font-weight: 500;
   transition: all .3s ease-in-out;
   HEIGHT: 25PX;
}

.button:hover{
   border: solid 2.5px #ba79f8;
}

.primary{
   background: #8005f2;
   color: white;
}

.primary:hover{
   background: #ba79f8;
}

.avatar{
   width: 100px;
   height: 100px;
   border: solid 2px black;
   border-radius: 100%;
   object-fit: cover;
}



.card{
   width: 100%;
   background: white;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   border-radius: 32px;
   overflow: hidden;
   transition: all .3s ease-in-out;
   -webkit-box-shadow: 0px 11px 24px -10px rgba(66, 68, 90, 1);
   -moz-box-shadow: 0px 11px 24px -10px rgba(66, 68, 90, 1);
   box-shadow: 0px 11px 24px -10px rgba(66, 68, 90, 1);
}

.card:hover{
   transform: scale(1.03);
}

.card img{
   width: 300px;
   height: 300px;
   object-fit: cover;
   display: block;
}

.card .titles{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 16px;

}

.card h1, .card h2{
   margin: 0;
   text-transform: uppercase;
}

.cards-zone{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 15px;
   padding: 5px;
   margin:0px 70px 70px 70px;
}

.card .musictime{
   width: fit-content;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0;
   margin-top: 5px;
   padding: 8px 16px;
   border-radius: 8px;
   border: solid 2.5px #8005F2;
   text-decoration: none;
   font-weight: 500;
   transition: all .3s ease-in-out;
   color: #8005F2;
}

.card .musictime:hover{
   transform: scale(1.1);
   background: #ba79f8;
   color: white;
   text-decoration: none;
}

.card h3{
   margin: 0;
}

p{
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 15px;
   font-size: 16px;
   margin: 0;

}

h1{
   display: flex;
   justify-content: center;
   align-items: center;
}

.card a{

      width: fit-content;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 16px;
      border-radius: 8px;
      border: solid 2.5px #8005F2;
      text-decoration: none;
      font-weight: 500;
      transition: all .3s ease-in-out;
      margin: 20px;
      color: #8005F2;
}

.card a:hover{
   border: solid 2.5px #ba79f8;
   color: #ba79f8;
}

footer{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   background-color: #ffcbf1;
   box-shadow: 10px 10px 15px #30004a4d;
   padding-top: 20px;
   padding-bottom: 20px;
}

.socialmedia{
   display: flex;
   flex-direction: row;
   margin: 5px 15px 15px 15px;
   gap: 10px;
}

footer p{
   margin: 0;
   padding: 0;
}

footer a{
   width: fit-content;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 8px 16px;
   border-radius: 8px;
   border: solid 2.5px #8005F2;
   text-decoration: none;
   font-weight: 500;
   color: #8005F2;
}

footer a:hover{
   transform: scale(1.1);
   background: #8005f2;
   color: white;


}

.hero{
   width: 100%;
   height: 100%;
   background: url(https://static.vecteezy.com/system/resources/previews/005/004/846/non_2x/abstract-sound-wave-curve-background-illustration-with-gold-and-blue-particles-creative-colorful-equalizer-and-spectrum-music-for-banner-and-poster-vector.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 10px 10px 15px #30004a4d;
}

.hero .titles{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 16px;
}

.hero h1, .hero p{
   margin: 0;
   text-transform: uppercase;
   color: white;
}
.hero p{
   font-weight: 400;
}